/**
 * QFlow design tokens — sourced from Q-Flow CID document
 */

:root {
    /* ── Accent (randomised on load via js/accent.js; defaults below) ── */
    --accent-color: #669999;
    --accent-color-rgb: 102, 153, 153;
    --accent-color-hover: #5a8a8a;
    --accent-color-light: #e8f2f2;

    /* ── Text ── */
    --color-title: #1c1c1c;           /* Cod Gray — headings */
    --color-subtitle: #4c4638;         /* Taupe */
    --color-text: #494949;             /* Tundora — body */
    --color-text-muted: #786955;       /* Coffee — secondary */
    --color-text-on-dark: #fffbf2;     /* Quarter Pearl Lusta */
    --color-text-inverse: #ffffff;

    /* ── Backgrounds ── */
    --color-bg-primary: #ffffff;
    --color-bg-cream: #fffbf2;         /* Quarter Pearl Lusta */
    --color-bg-cream-alt: #fffcf5;
    --color-bg-light: #f7f7f7;
    --color-bg-muted: #efefef;
    --color-bg-dark: #1c1c1c;          /* Cod Gray */
    --color-bg-header: #000000;        /* hero/header treatment in design */

    /* ── Neutrals ── */
    --color-alto: #d6d6d6;
    --color-tundora: #494949;
    --color-taupe: #4c4638;
    --color-coffee: #786955;
    --color-border: rgba(0, 0, 0, 0.12);
    --color-border-subtle: rgba(0, 0, 0, 0.08);
    --color-divider-on-dark: #2a2a2a;

    /* ── Semantic (CID palette) ── */
    --color-success: #008f60;
    --color-warning: #ffbf00;
    --color-danger: #bb0000;
    --color-info: #030d94;

    /* ── Typography families ── */
    --font-century: 'Century Gothic Paneuropean', 'Century Gothic', 'CenturyGothic', sans-serif;
    --font-heading: 'Breul Grotesk', var(--font-century), 'Trebuchet MS', sans-serif;
    --font-body: var(--font-century), 'Trebuchet MS', sans-serif;

    /* Override Bootstrap so components inherit brand body font */
    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);

    /* ── Type scale (CID hierarchy) ── */
    --text-display-size: 4rem;          /* 64px */
    --text-display-line: 4.5rem;        /* 72px */
    --text-display-weight: 700;

    /* Hero headlines — fluid from laptop → large desktop */
    --hero-title-size: clamp(2.375rem, 1.5rem + 3vw, 4rem);
    --hero-title-line: 1.1;

    /* Hero body — 32px (2rem) max, scales down on smaller viewports */
    --hero-body-size: clamp(1rem, 0.8rem + 1.1vw, 2rem);
    --hero-body-line: 2.5rem;

    --text-h1-size: 3rem;               /* 48px */
    --text-h1-line: 3.5rem;             /* 56px */
    --text-h1-weight: 700;

    --text-h2-size: 2rem;               /* 32px */
    --text-h2-line: 2.5rem;             /* 40px */
    --text-h2-weight: 600;

    --text-h3-size: 2rem;               /* 32px */
    --text-h3-line: 2.5rem;             /* 40px */
    --text-h3-weight: 600;

    --text-h4-size: 1.5rem;             /* 24px */
    --text-h4-line: 2rem;               /* 32px */
    --text-h4-weight: 600;

    --text-h5-size: 1.25rem;            /* 20px */
    --text-h5-line: 1.75rem;            /* 28px */
    --text-h5-weight: 600;

    --text-body-lg-size: 1.125rem;      /* 18px */
    --text-body-lg-line: 1.75rem;       /* 28px */
    --text-body-lg-weight: 400;

    --text-body-size: 1.25rem;             /* 20px */
    --text-body-line: 1.75rem;           /* 28px */
    --text-body-weight: 400;

    --text-body-sm-size: 0.875rem;      /* 14px */
    --text-body-sm-line: 1.25rem;       /* 20px */
    --text-body-sm-weight: 400;

    --text-label-size: 0.875rem;        /* 14px */
    --text-label-line: 1rem;            /* 16px */
    --text-label-weight: 500;

    --text-overline-size: 0.75rem;      /* 12px */
    --text-overline-line: 1rem;         /* 16px */
    --text-overline-weight: 600;

    --text-caption-size: 0.75rem;       /* 12px */
    --text-caption-line: 1rem;          /* 16px */
    --text-caption-weight: 400;

    --text-button-size: 0.875rem;      /* 14px */
    --text-button-line: 1rem;           /* 16px */
    --text-button-weight: 600;

    /* ── Line Height Scale (unitless ratios for consistency) ── */
    --line-height-none: 1;              /* Tight - icons, single-line elements */
    --line-height-tight: 1.1;           /* Tight - hero titles, display text */
    --line-height-snug: 1.2;            /* Snug - headings, card titles */
    --line-height-normal: 1.3;          /* Normal - sub-headings, labels */
    --line-height-relaxed: 1.4;         /* Relaxed - short paragraphs */
    --line-height-comfortable: 1.6;     /* Comfortable - long-form reading */
    --line-height-loose: 1.75;          /* Loose - body copy (1.75rem / 28px) */

    /* ── Layout ── */
    /* Section + container inset — 3.75rem (60px) on desktop */
    --section-padding: 3.75rem;
    --section-padding-x: var(--section-padding);
    --section-padding-y: var(--section-padding);
    --container-padding-x: var(--section-padding-x);
    --shell-padding: var(--section-padding-x);
    --shell-padding-mobile: 0;

    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 28px;
    --border-radius-pill: 100px;
    --page-inner-radius: 2.5rem;        /* 40px — inner shell container */
    --solution-card-radius: var(--page-inner-radius);
    --color-solution-section-bg: #b7b5af;
    --color-features-section-bg: #e6e6e6;
    --color-feature-card-bg: #fefbf6;
    --features-section-overlay: url('../images/overlay1.webp');
    --features-section-overlay-opacity: 0.2;

    /* Preview / gallery section */
    --color-preview-section-bg: var(--color-bg-header);
    --preview-thumb-radius: 10px;
    --preview-modal-backdrop: rgba(0, 0, 0, 0.3);

    /* About section blocks */
    --color-about-challenge-bg: #f7f7f7;
    --color-about-fails-bg: #e6e6e6;

    /* Value section blocks */
    --color-value-package-bg: rgba(var(--accent-color-rgb), 0.4);
    --color-value-package-addon-bg: rgba(var(--accent-color-rgb), 0.5);
    --color-value-outcomes-bg: #e6e6e6;
    --color-value-audience-bg: #f7f7f7;

    /* Value section (legacy — blocks use tokens above) */
    --color-value-section-bg: #e6e6e6;
    --color-value-divider: rgba(0, 0, 0, 0.12);

    /* About section (legacy — blocks use tokens above) */
    --color-about-section-bg: #f7f7f7;

    /* People section */
    --color-people-section-bg: #e2e2e2;

    /* Contact section */
    --color-contact-section-bg: #f7f7f7;
    --contact-card-radius: var(--page-inner-radius);

    /* Footer */
    --color-site-footer-bg: var(--color-bg-header);
    --color-site-footer-silhouette-underlay: var(--color-white);
    --color-site-footer-silhouette-overlay: rgba(var(--accent-color-rgb), 0.4);

    /* Proudly Namibian section */
    --color-proudly-namibian-section-bg: rgba(var(--accent-color-rgb), 0.7);
    --proudly-namibian-section-overlay: url('../images/proudly_namibian.webp');
    --proudly-namibian-section-overlay-opacity: 0.25;

    /* Section eyebrows / overlines (brown — consistent across sections) */
    --color-section-eyebrow: var(--color-coffee);

    /* Logo notch — scaled ÷1.6 from prior size (80% browser zoom correction) */
    --logo-notch-width: clamp(21.1rem, calc(15.16rem + 9.375vw), 25.78rem);
    --logo-notch-height: clamp(5.94rem, calc(4.53rem + 2.8125vw), 7.7rem);
    --logo-notch-aspect: 511.285 / 130.22;
    --logo-notch-logo-offset-y: 1.25rem;   /* 20px — logo sits below flush top */
    --logo-notch-logo-shrink: 1.25rem;     /* 20px — logo max-width reduction */
    --logo-notch-mask: url('../images/branding/notch-cutout.svg');

    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(28, 28, 28, 0.08);
    --shadow-md: 0 4px 16px rgba(28, 28, 28, 0.12);
    --shadow-lg: 0 8px 32px rgba(28, 28, 28, 0.16);

    /* ── Legacy aliases (migrate section-by-section) ── */
    --color-black: var(--color-bg-header);
    --color-dark-grey: var(--color-title);
    --color-warm-beige: var(--color-alto);
    --color-soft-cream: var(--color-bg-cream);
    --color-muted-teal: var(--accent-color);
    --color-white: var(--color-bg-primary);
    --font-primary: var(--font-body);
}

@media (max-width: 768px) {
    :root {
        --section-padding: 1.25rem;
        --section-padding-x: var(--section-padding);
        --section-padding-y: 2.5rem;
    }
}