/* ═══════════════════════════════════════════════════════════════════════════
   AutoReply Pro — Design tokens
   ═══════════════════════════════════════════════════════════════════════════

   The ONE place colour, type, spacing, elevation and motion are defined.
   `styles.css` and `eid.html` both load this file: the campaign landing page
   used to carry its own copy of the variable block with values 1px and a few
   hex digits away from the app's, which is two design systems in one repo.

   Rules this file encodes:

   1.  Every value is a token. If a component needs a number that is not here,
       the scale is wrong — extend the scale, do not write a magic value.
   2.  Semantic names, not literal ones. Components reference `--surface-raised`
       and `--text-muted`; only this file knows they are grey.
   3.  Themes swap the semantic layer, never the component CSS. Dark is the
       default and the identity; light is a full peer, not an afterthought.
   4.  Arabic is the primary script. Line-height is generous by default and
       letter-spacing is NEVER applied to text — it breaks Arabic joining.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── Type ───────────────────────────────────────────────────────────────
       Seven steps, replacing the twelve ad-hoc sizes (9,10,11,12,13,14,15,16,
       18,20,28,32px) the eight screens used to share. 11px was unreadable in
       the UI face and carried table headers and timestamps; the floor is now 12px. */
    /* ─── Apple system stack, and no webfont at all ───────────────────────────
       HIG's own answer to typography is "use the system font", so this loads
       nothing: the Google Fonts request is gone, which removes a third-party
       round trip from the critical path as well as ~100KB.

       Arabic coverage is the part that needed care, because it is functional
       rather than aesthetic here. On Apple platforms `-apple-system` resolves to
       SF, which includes SF Arabic and is the authentic choice. Elsewhere the
       stack falls through to each platform's own UI face and then to named
       Arabic faces that are present by default (Noto Sans Arabic on Android and
       most Linux, Geeza Pro on older Apple, Tahoma on Windows). Glyph fallback
       is per-character, so an Arabic run always lands on something designed for
       it rather than on a Latin face with no Arabic at all. */
    --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'SF Arabic',
               system-ui, 'Segoe UI', Roboto, 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif;
    --font-latin: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', monospace;

    --fs-100: 0.75rem;    /* 12px — meta, timestamps, chips            */
    --fs-200: 0.875rem;   /* 14px — the UI default                     */
    --fs-300: 1rem;       /* 16px — body copy, message bubbles         */
    --fs-400: 1.125rem;   /* 18px — card and section titles            */
    --fs-500: 1.375rem;   /* 22px — page title                         */
    --fs-600: 1.75rem;    /* 28px — stat values                        */
    --fs-700: 2.25rem;    /* 36px — hero                               */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Arabic needs more leading than Latin at the same size. These are the
       Arabic-first values; `:root:lang(en)` tightens them below. */
    --lh-tight: 1.45;     /* headings, single-line chrome */
    --lh-normal: 1.75;    /* UI text */
    --lh-loose: 2;        /* multi-line Arabic content: DM templates, bubbles */

    /* ─── Space ──────────────────────────────────────────────────────────────
       A 4px base, eight steps. Replaces 2,4,6,8,10,12,14,16,18,20,24,28,32,36,
       40 and 48px used interchangeably across the pages. */
    --space-1: 0.25rem;   /*  4 */
    --space-2: 0.5rem;    /*  8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.5rem;    /* 24 */
    --space-6: 2rem;      /* 32 */
    --space-7: 3rem;      /* 48 */
    --space-8: 4rem;      /* 64 */

    /* ─── Radius ─────────────────────────────────────────────────────────── */
    /* HIG geometry: buttons and inputs 8-10, inner panels 12-14, outer windows
       and modals 16-20, chips full-pill. Larger than the previous 3/6/9/13/18
       because macOS surfaces are softer than a dense data tool - the radius is
       part of what makes a window read as a window. */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    /* The phone mock's bezel, and nothing else: a device frame, not a window. */
    --radius-2xl: 30px;
    --radius-pill: 999px;

    /* ─── Layout ─────────────────────────────────────────────────────────── */
    --sidebar-width: 268px;
    --header-height: 76px;
    --tap-target: 44px;
    --measure: 68ch;
    /* The focus halo's spread, for every `:focus-visible` / `:focus-within` ring. */
    --ring: 4px;

    /* ─── Stacking ───────────────────────────────────────────────────────────
       The layers that share the ROOT stacking context, lowest first. A value
       inside one component (the nav marker behind its row, a sticky bar inside
       the page's own stacking context) stays local and is not a layer here. */
    --z-header: 10;
    --z-drawer: 50;       /* the sidebar; its scrim sits just under it */
    --z-modal: 100;
    --z-toast: 200;
    --z-skip: 300;        /* the skip link must clear everything, modals included */

    /* ─── Icons ──────────────────────────────────────────────────────────────
       Five glyph sizes for the in-line icons. Display icons (the empty-state
       and setup marks, 26-46px) and the 18px ones keep their own values: each
       sits 2px or more from any step, and a step that moved them would be a
       visible change rather than a rename. */
    --icon-xs: 12px;      /* badges, chips */
    --icon-sm: 14px;      /* beside meta text (12px) */
    --icon-md: 16px;      /* beside UI text (14px), buttons; the default */
    --icon-lg: 20px;      /* navigation and chrome buttons */
    --icon-xl: 24px;      /* media placeholders */

    /* ─── Dimmed states ──────────────────────────────────────────────────────
       Three meanings, three values. Disabled cannot be used; off is switched
       off but still readable (a paused tenant, a revoked member); busy is
       working and its label must stay legible while it works. */
    --opacity-disabled: 0.45;
    --opacity-off: 0.62;
    --opacity-busy: 0.75;

    /* ─── Motion ─────────────────────────────────────────────────────────── */
    /* The HIG-style ease: a long, decelerating tail so a hover settles rather
       than snapping. Used for everything that is not an exit. */
    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
    /* Blur radii for the glass surfaces, so a component never hardcodes one. */
    --blur-glass: 20px;
    --blur-elevated: 28px;
    --blur-chrome: 24px;
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;

    /* ─── Brand (platform) ───────────────────────────────────────────────────
       Instagram #E1306C and Facebook #1877F2 were hardcoded in five places
       each, and again inside two Chart.js config blocks. */
    --brand-instagram: #e1306c;
    --brand-instagram-soft: rgba(225, 48, 108, 0.14);
    --brand-instagram-text: #ff75a6;
    --brand-facebook: #1877f2;
    --brand-facebook-soft: rgba(24, 119, 242, 0.14);
    --brand-facebook-text: #6fa8ff;
    /* TikTok's cyan, as a tint only. The label on a TikTok badge is the
       theme's own text colour: cyan text fails contrast on a light surface,
       and TikTok's brand is black-and-white first anyway. */
    --brand-tiktok: #25f4ee;
    --brand-tiktok-soft: rgba(37, 244, 238, 0.16);
    --brand-youtube-soft: rgba(255, 0, 51, 0.14);
    --brand-on-solid: #ffffff;

    /* ─── Chart series ───────────────────────────────────────────────────────
       Read by js/charts.js through getComputedStyle, so the charts follow the
       theme instead of carrying their own duplicated hex values. */
    --chart-positive: #2dd4a7;
    --chart-negative: #f87171;
}

/* ─── Dark theme (default, and the product's identity) ─────────────────── */
:root,
:root[data-theme='dark'] {
    color-scheme: dark;

    /* ─── Surfaces ────────────────────────────────────────────────────────────
       `surface-raised` and `surface-overlay` are TRANSLUCENT now: they are the
       glass card and the glass modal, and they only resolve to a real colour
       once composited over the canvas. Anything that needs an opaque background
       (a chart canvas, an image frame) must use `--surface-solid`, which exists
       for exactly that and is not glass. */
    --surface-page: #161617;
    /* The lightest stop equals --surface-page, so the flat value the contrast
       guard measures remains the worst case for light text. */
    --surface-ambient:
        radial-gradient(1100px 760px at 18% -12%, #161617 0%, #121213 48%, #0d0d0e 100%);
    --surface-sunken: #0f0f10;
    --surface-raised: rgba(40, 40, 44, 0.65);
    --surface-overlay: rgba(48, 48, 52, 0.82);
    /* The opaque escape hatch. Matches what `surface-raised` composites to. */
    --surface-solid: #222225;
    /* The window chrome: the sidebar AND the top bar, one recipe so their L-shaped
       join has no seam. `--surface-solid` at 86%: the colour the sidebar already
       composited to, opaque enough that the page title stays legible over content
       scrolling under the bar. */
    --surface-chrome: rgba(34, 34, 37, 0.86);
    /* HIG "secondary fill": the tint behind a pill, a chip, a hover row. */
    --surface-glass: rgba(255, 255, 255, 0.08);
    --surface-glass-hover: rgba(255, 255, 255, 0.11);
    --surface-scrim: rgba(0, 0, 0, 0.5);

    /* In dark mode a hairline border does the work a shadow does in light. */
    --border-subtle: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.2);

    --text-strong: #f5f5f7;
    --text-default: #d1d1d6;
    --text-muted: #aeaeb2;
    --text-on-accent: #ffffff;
    /* The native <select> chevron, as a data URI because a <select> cannot host a
       pseudo-element. The stroke is a theme value: one fixed grey measured under
       3:1 on the light sunken well. */
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* ─── Accent ──────────────────────────────────────────────────────────────
       `--accent` is the FILL (buttons, active states, focus rings) and
       `--accent-text` is the LABEL colour. They differ on purpose: #0071E3 as
       text on the glass surface measures 3.38:1, below AA, while white on
       #0071E3 measures 4.70:1 and passes. Apple ships separate "accessible"
       variants for precisely this, and `--accent-text` is theirs (#409CFF, which
       measures 5.60:1 on glass). Using the fill colour as text is the single
       easiest way to make this palette inaccessible. */
    --accent: #0071e3;
    --accent-hover: #0077ed;
    --accent-active: #005bb5;
    --accent-soft: rgba(0, 113, 227, 0.18);
    --accent-ring: rgba(0, 113, 227, 0.35);
    --accent-text: #6bb1ff;

    /* Same fill-vs-text split. The bare system colours are Apple's fills; every
       `-text` value is Apple's published accessible variant. */
    --success: #34c759;
    --success-soft: rgba(52, 199, 89, 0.16);
    --success-text: #30db5b;
    --danger: #ff3b30;
    --danger-soft: rgba(255, 59, 48, 0.16);
    --danger-text: #ff938c;
    --warning: #ff9f0a;
    --warning-soft: rgba(255, 159, 10, 0.16);
    --warning-text: #ffb340;
    --info: #5e5ce6;
    --info-soft: rgba(94, 92, 230, 0.18);
    --info-text: #a3a1ff;

    /* One tinted border per tone, for every callout, error strip and alarm edge. The
       tone at 30%: the 28/30/35/40/45% mixes it replaces were one intent written five ways. */
    --border-info: color-mix(in srgb, var(--info) 30%, transparent);
    --border-warning: color-mix(in srgb, var(--warning) 30%, transparent);
    --border-danger: color-mix(in srgb, var(--danger) 30%, transparent);
    --border-success: color-mix(in srgb, var(--success) 30%, transparent);

    /* Barely a gradient: a single hue lit from the top edge, which is what a
       macOS control does. Anything more is a different operating system. */
    --gradient-brand: linear-gradient(180deg, #0a7cf0, #0071e3 60%, #0064cc);
    --gradient-brand-soft: linear-gradient(180deg, rgba(0, 113, 227, 0.16), rgba(0, 100, 204, 0.05));

    /* Soft and diffuse, never harsh. Dark mode leans on borders more than
       shadow, so these are restrained and the modal carries the depth. */
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.32);
    --elev-2: 0 4px 24px -1px rgba(0, 0, 0, 0.38), 0 2px 6px -1px rgba(0, 0, 0, 0.28);
    --elev-3: 0 16px 48px rgba(0, 0, 0, 0.5);
    --elev-glow: 0 4px 24px -1px rgba(0, 0, 0, 0.38);

    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tick: #a1a1a6;
}


/* ─── Light theme ────────────────────────────────────────────────────────────
   Applied when the OS asks for light and the operator has not pinned a theme,
   or when they pin light explicitly. Glass is inverted rather than reused:
   a white-alpha overlay on a light page is invisible. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme='dark']) {
        color-scheme: light;

        --surface-page: #f5f5f7;
        /* Darkest stop equals --surface-page: worst case for dark text. */
        --surface-ambient:
            radial-gradient(1100px 760px at 18% -12%, #ffffff 0%, #fafafc 48%, #f5f5f7 100%);
        --surface-sunken: #ededf0;
        --surface-raised: rgba(255, 255, 255, 0.72);
        --surface-overlay: rgba(255, 255, 255, 0.88);
        --surface-solid: #ffffff;
        --surface-chrome: rgba(255, 255, 255, 0.86);
        --surface-glass: rgba(0, 0, 0, 0.05);
        --surface-glass-hover: rgba(0, 0, 0, 0.075);
        --surface-scrim: rgba(0, 0, 0, 0.28);

        --border-subtle: rgba(0, 0, 0, 0.06);
        --border-strong: rgba(0, 0, 0, 0.12);

        /* `--text-muted` is #6E6E73, not the #86868B the brief gave. That value
           measures 3.33:1 on the canvas and 3.53:1 on glass - below AA for
           normal text, and it carries form hints, table headers, empty states
           and every timestamp in the product. #6E6E73 is still an Apple system
           grey and measures 4.66:1 / 4.95:1. The brief's value is not kept: it
           passed only as large text, and no rule here ever used it. */
        --text-strong: #1d1d1f;
        --text-default: #3a3a3c;
        --text-muted: #636366;
        --text-on-accent: #ffffff;
        --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

        --accent: #0071e3;
        --accent-hover: #0077ed;
        --accent-active: #005bb5;
        --accent-soft: rgba(0, 113, 227, 0.1);
        --accent-ring: rgba(0, 113, 227, 0.3);
        /* Apple's accessible blue. #0071E3 as text on the canvas is 4.31:1. */
        --accent-text: #0040dd;

        --success: #34c759;
        --success-soft: rgba(52, 199, 89, 0.14);
        /* Apple's accessibleGreen (#248A3D) is 4.04:1 here, still short, so this
           is one step darker in the same family at 4.96:1. */
        --success-text: #1c712f;
        --danger: #ff3b30;
        --danger-soft: rgba(255, 59, 48, 0.12);
        --danger-text: #c40013;
        --warning: #ff9f0a;
        --warning-soft: rgba(255, 159, 10, 0.16);
        --warning-text: #b32e00;
        --info: #5e5ce6;
        --info-soft: rgba(94, 92, 230, 0.1);
        --info-text: #4c4acc;

        /* One tinted border per tone, for every callout, error strip and alarm edge. The
           tone at 30%: the 28/30/35/40/45% mixes it replaces were one intent written five ways. */
        --border-info: color-mix(in srgb, var(--info) 30%, transparent);
        --border-warning: color-mix(in srgb, var(--warning) 30%, transparent);
        --border-danger: color-mix(in srgb, var(--danger) 30%, transparent);
        --border-success: color-mix(in srgb, var(--success) 30%, transparent);

        /* Platform labels: the dark values are pastels that measured ~2:1 as text on
           the -soft tint over the light card, so light gets its own deeper pair. */
        --brand-instagram-text: #b5185c;
        --brand-facebook-text: #0a58ca;

        --gradient-brand: linear-gradient(180deg, #0a7cf0, #0071e3 60%, #0064cc);
        --gradient-brand-soft: linear-gradient(180deg, rgba(0, 113, 227, 0.09), rgba(0, 100, 204, 0.03));

        --elev-1: 0 1px 2px rgba(0, 0, 0, 0.04);
        --elev-2: 0 4px 24px -1px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
        --elev-3: 0 16px 48px rgba(0, 0, 0, 0.14);
        --elev-glow: 0 4px 24px -1px rgba(0, 0, 0, 0.06);

        --chart-positive: #248a3d;
        --chart-negative: #d70015;
        --chart-grid: rgba(0, 0, 0, 0.07);
        --chart-tick: #6e6e73;
    }
}

/* The same block again for an explicitly pinned light theme, so the toggle
   works on a machine whose OS is in dark mode. Kept verbatim rather than
   factored into a class: a `[data-theme]` selector and a media query cannot
   share a declaration block without a preprocessor, and there is none here. */
:root[data-theme='light'] {
    color-scheme: light;

    --surface-page: #f5f5f7;
        /* Darkest stop equals --surface-page: worst case for dark text. */
        --surface-ambient:
            radial-gradient(1100px 760px at 18% -12%, #ffffff 0%, #fafafc 48%, #f5f5f7 100%);
    --surface-sunken: #ededf0;
    --surface-raised: rgba(255, 255, 255, 0.72);
    --surface-overlay: rgba(255, 255, 255, 0.88);
    --surface-solid: #ffffff;
    --surface-chrome: rgba(255, 255, 255, 0.86);
    --surface-glass: rgba(0, 0, 0, 0.05);
    --surface-glass-hover: rgba(0, 0, 0, 0.075);
    --surface-scrim: rgba(0, 0, 0, 0.28);

    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.12);

    /* `--text-muted` is #6E6E73, not the #86868B the brief gave. That value
       measures 3.33:1 on the canvas and 3.53:1 on glass - below AA for
       normal text, and it carries form hints, table headers, empty states
       and every timestamp in the product. #6E6E73 is still an Apple system
       grey and measures 4.66:1 / 4.95:1. The brief's value is not kept: it
       passed only as large text, and no rule here ever used it. */
    --text-strong: #1d1d1f;
    --text-default: #3a3a3c;
    --text-muted: #636366;
    --text-on-accent: #ffffff;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --accent: #0071e3;
    --accent-hover: #0077ed;
    --accent-active: #005bb5;
    --accent-soft: rgba(0, 113, 227, 0.1);
    --accent-ring: rgba(0, 113, 227, 0.3);
    /* Apple's accessible blue. #0071E3 as text on the canvas is 4.31:1. */
    --accent-text: #0040dd;

    --success: #34c759;
    --success-soft: rgba(52, 199, 89, 0.14);
    /* Apple's accessibleGreen (#248A3D) is 4.04:1 here, still short, so this
       is one step darker in the same family at 4.96:1. */
    --success-text: #1c712f;
    --danger: #ff3b30;
    --danger-soft: rgba(255, 59, 48, 0.12);
    --danger-text: #c40013;
    --warning: #ff9f0a;
    --warning-soft: rgba(255, 159, 10, 0.16);
    --warning-text: #b32e00;
    --info: #5e5ce6;
    --info-soft: rgba(94, 92, 230, 0.1);
    --info-text: #4c4acc;

    /* One tinted border per tone, for every callout, error strip and alarm edge. The
       tone at 30%: the 28/30/35/40/45% mixes it replaces were one intent written five ways. */
    --border-info: color-mix(in srgb, var(--info) 30%, transparent);
    --border-warning: color-mix(in srgb, var(--warning) 30%, transparent);
    --border-danger: color-mix(in srgb, var(--danger) 30%, transparent);
    --border-success: color-mix(in srgb, var(--success) 30%, transparent);

    /* Platform labels: the dark values are pastels that measured ~2:1 as text on
       the -soft tint over the light card, so light gets its own deeper pair. */
    --brand-instagram-text: #b5185c;
    --brand-facebook-text: #0a58ca;

    --gradient-brand: linear-gradient(180deg, #0a7cf0, #0071e3 60%, #0064cc);
    --gradient-brand-soft: linear-gradient(180deg, rgba(0, 113, 227, 0.09), rgba(0, 100, 204, 0.03));

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --elev-2: 0 4px 24px -1px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    --elev-3: 0 16px 48px rgba(0, 0, 0, 0.14);
    --elev-glow: 0 4px 24px -1px rgba(0, 0, 0, 0.06);

    --chart-positive: #248a3d;
    --chart-negative: #d70015;
    --chart-grid: rgba(0, 0, 0, 0.07);
    --chart-tick: #6e6e73;
}

/* Latin UI runs tighter than Arabic at the same size. */
:root:lang(en) {
    --lh-tight: 1.3;
    --lh-normal: 1.55;
    --lh-loose: 1.7;
}

/* Honour the OS setting. The dashboard animated a pulsing login glow, a
   blinking status dot, typing dots and a counter tween with no escape hatch. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 1ms;
        --motion-base: 1ms;
        --motion-slow: 1ms;
    }
}