/* ==========================================================================
   Replim design tokens
   --------------------------------------------------------------------------
   One token layer for every surface: landing, auth and the signed in app.
   Before this file the landing carried its own --lp-* set and the app carried
   variables.css, and the two had already drifted (different accent, different
   display face). Everything now resolves through the semantic names below.

   Structure:
     1. Raw ramps      -- the only place a hex literal is allowed.
     2. Semantic names -- what the rest of the CSS is allowed to reference.
     3. Theme blocks   -- light, system dark, forced light, forced dark.

   The ramps are theme independent, so a theme block is nothing but a remap.
   That is what stops the two dark declarations drifting apart, since neither
   one contains a colour value of its own.

   Palette rationale: the product's subject matter is other people's writing,
   so the canvas is warm paper rather than clinical white and the dark theme is
   a warm near black rather than the blue grey every dashboard defaults to.
   One accent, a rust ember, carries the brand. Sentiment colours are held
   separate from it and are always paired with a text label, never colour alone.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------------
       1. RAW RAMPS
       --------------------------------------------------------------------- */

    /* Warm neutral ramp. Shared by both themes, walked from opposite ends. */
    --w-0:   #FFFFFF;
    --w-50:  #FBFAF8;
    --w-100: #F5F2EC;
    --w-150: #EFEBE3;
    --w-200: #E5E0D6;
    --w-300: #D5CEC1;
    --w-400: #B6AF9F;
    --w-500: #8E8879;
    --w-600: #6E6960;
    --w-700: #57544C;
    --w-800: #3B3833;
    --w-850: #2B2924;
    --w-900: #211F1A;
    --w-925: #1A1814;
    --w-950: #14130F;
    --w-975: #0C0B09;

    /* Rust ember. The single brand accent. */
    --r-50:  #FDF0EA;
    --r-100: #FADCCF;
    --r-200: #F6BCA3;
    --r-300: #F0855C;
    --r-400: #E85F31;
    --r-500: #D9451C;
    --r-600: #C03D16;
    --r-700: #A2330F;
    --r-900: #2E1810;
    --r-950: #23120B;

    /* Sentiment.
       The positive pole is a TEAL, not a green. Green against this red is the
       classic red/green collapse: measured with the Machado severity-1.0 CVD
       simulation, #2C6B4B against #9E352F separates by only OKLab ΔE 5.2 in
       light and 2.6 in dark, both under the ΔE 6 floor — a deuteranope cannot
       tell the two ends of a sentiment bar apart. Re-stepping the positive
       pole to teal takes those to 9.2 and 11.6, clearing the ΔE 8 target.
       Teal still reads as "good" and it moves the positive pole away from the
       rust accent as a bonus.

       Text and fill are separate slots: the dark negative needs a lighter step
       to clear 4.5:1 as tag text (#C25048 lands at 3.71:1 on its own chip)
       while the bar fill wants the deeper one for contrast against the track. */
    --pos-100: #E4F0EE;  --pos-500: #0F766E;  --pos-300: #35A89A;  --pos-900: #10241F;
    --neg-100: #FAEAE7;  --neg-500: #9E352F;  --neg-300: #DC7168;  --neg-900: #2A1614;
    --neg-fill-dark: #C25048;
    --warn-100:#F9EFD8;  --warn-500:#7E5810;  --warn-300:#E2B85F;  --warn-900:#251E0E;

    /* Platform marks, from each brand's own guidelines. Paired tints are
       tuned per theme in the blocks below. */
    --brand-instagram: #E4405F;
    --brand-facebook:  #0866FF;
    --brand-linkedin:  #0A66C2;
    --brand-youtube:   #FF0000;

    /* ---------------------------------------------------------------------
       2. NON-COLOUR SCALES  (theme independent)
       --------------------------------------------------------------------- */

    /* Type. Newsreader carries display and long comment bodies because the
       product is about reading what people wrote; Inter carries every piece
       of interface text. Two families total, which is the performance budget
       the landing already committed to. Mono is the system stack, so it costs
       no download. */
    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --t-display: clamp(2.2rem, 1.35rem + 3.3vw, 3.75rem);
    --t-title:   clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
    --t-head:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --t-lead:    clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
    --t-body:    0.9375rem;   /* 15px  interface default */
    --t-sm:      0.875rem;    /* 14px  secondary         */
    --t-xs:      0.8125rem;   /* 13px  meta              */
    --t-2xs:     0.75rem;     /* 12px  eyebrows, counts  */

    /* Reading measure for comment bodies. Anything wider stops scanning. */
    --measure: 64ch;
    --measure-narrow: 46ch;

    /* Space. 4px base; the named steps are the only ones used in layout. */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
    --band: clamp(64px, 7vw, 112px);   /* landing section rhythm */
    --gutter: 24px;

    /* Shape */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Motion. Fixed roles, per the landing research: hover, small interface
       transition, panel. Transform and opacity only. */
    --t-hover: 150ms;
    --t-ui: 220ms;
    --t-panel: 340ms;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layering */
    --z-sticky: 100;
    --z-rail: 40;
    --z-topbar: 50;
    --z-overlay: 200;
    --z-toast: 300;

    /* Fixed layout metrics the app shell and its media queries share. */
    --rail-w: 244px;
    --list-w: 380px;
}

/* ==========================================================================
   3. THEME BLOCKS

   Light is the default. Dark applies when the system asks for it and the user
   has not forced light, or when the user has forced dark. Because every block
   only remaps ramp entries, the two dark blocks are identical by construction.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Surfaces, named by role rather than by lightness, so the same name
       means the same thing in both themes. */
    --canvas: var(--w-50);
    --surface: var(--w-0);
    --raised: var(--w-0);
    --sunken: var(--w-100);
    --tint: var(--w-100);
    --inset: var(--w-150);

    /* Ink */
    --ink: var(--w-950);
    --ink-2: var(--w-700);
    --ink-3: var(--w-600);
    --ink-faint: var(--w-500);
    --on-accent: #FFFFFF;

    /* Lines */
    --line: var(--w-200);
    --line-soft: var(--w-150);
    --line-strong: var(--w-300);

    /* Accent.
       --accent      identity colour: rules, marks, focus ring, active state.
       --accent-fill button and chip fills. Deeper, because white body text on
                     #D9451C lands at 4.35:1 and normal sized text needs 4.5.
                     #C03D16 gives 5.4:1 and reads as the same colour.
       --accent-text accent coloured text on a light surface. */
    --accent: var(--r-500);
    --accent-fill: var(--r-600);
    --accent-fill-hover: var(--r-700);
    --accent-text: var(--r-700);
    --accent-soft: var(--r-50);
    --accent-soft-line: var(--r-100);

    /* Sentiment. --*-fill is the chart mark; the bare name is the text step. */
    --pos: var(--pos-500);      --pos-bg: var(--pos-100);   --pos-fill: var(--pos-500);
    --neg: var(--neg-500);      --neg-bg: var(--neg-100);   --neg-fill: var(--neg-500);
    --warn: var(--warn-500);    --warn-bg: var(--warn-100);

    /* Inverted band. A dark section inside a light page, and the reverse. */
    --invert-bg: var(--w-950);
    --invert-ink: var(--w-100);
    --invert-ink-2: var(--w-400);
    --invert-line: rgba(255, 255, 255, 0.13);
    --invert-accent: var(--r-300);

    /* Elevation. Warm tinted rather than neutral black so shadows sit in the
       same colour family as the paper. */
    --shadow-sm: 0 1px 2px rgba(20, 19, 15, 0.05);
    --shadow: 0 1px 2px rgba(20, 19, 15, 0.04), 0 10px 30px rgba(20, 19, 15, 0.06);
    --shadow-lift: 0 2px 6px rgba(20, 19, 15, 0.06), 0 24px 60px rgba(20, 19, 15, 0.12);
    --shadow-pop: 0 8px 16px rgba(20, 19, 15, 0.08), 0 32px 72px rgba(20, 19, 15, 0.16);

    /* Translucent chrome backdrop, used with backdrop-filter. */
    --veil: rgba(251, 250, 248, 0.82);
    --scrim: rgba(20, 19, 15, 0.4);

    /* Platform tints */
    --tint-instagram: #FFE7EE;  --ink-instagram: #B3164F;
    --tint-facebook:  #E1EBFE;  --ink-facebook:  #0B4CB5;
    --tint-linkedin:  #DDEBF9;  --ink-linkedin:  #0A5699;
    --tint-youtube:   #FEE3E3;  --ink-youtube:   #B81B1B;
}

/* --------------------------------------------------------------------------
   Dark has to be declared twice: once for the OS preference, once for the
   toggle, and the toggle must be able to win in both directions. CSS gives no
   way to share a declaration block between a media query and a bare selector,
   so the two bodies below are kept BYTE IDENTICAL, including indentation, and
   the media query's inner rule is deliberately left unindented so a mechanical
   diff of the two bodies stays meaningful. If you edit one, edit the other.
   -------------------------------------------------------------------------- */

/* --- Dark, when the system asks and the user has not overridden ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: var(--w-950);
    --surface: var(--w-925);
    --raised: var(--w-900);
    --sunken: var(--w-975);
    --tint: var(--w-925);
    --inset: var(--w-900);

    --ink: var(--w-100);
    --ink-2: var(--w-400);
    --ink-3: var(--w-500);
    --ink-faint: var(--w-600);

    --line: var(--w-850);
    --line-soft: var(--w-900);
    --line-strong: var(--w-800);

    /* On a near-black canvas the deep fill loses its edge, so dark mode flips
       the pairing: a brighter fill carrying dark ink. White on #D9451C is only
       4.36:1; ink on #E85F31 is 5.41:1, and that fill also clears the canvas
       at 5.41:1. */
    --accent: var(--r-400);
    --accent-fill: var(--r-400);
    --accent-fill-hover: var(--r-300);
    --accent-text: var(--r-300);
    --accent-soft: var(--r-900);
    --accent-soft-line: var(--r-950);
    --on-accent: var(--w-950);

    --pos: var(--pos-300);      --pos-bg: var(--pos-900);   --pos-fill: var(--pos-300);
    --neg: var(--neg-300);      --neg-bg: var(--neg-900);   --neg-fill: var(--neg-fill-dark);
    --warn: var(--warn-300);    --warn-bg: var(--warn-900);

    /* In dark, the inverted band goes light. */
    --invert-bg: var(--w-100);
    --invert-ink: var(--w-950);
    --invert-ink-2: var(--w-700);
    --invert-line: rgba(20, 19, 15, 0.12);
    --invert-accent: var(--r-700);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 8px 16px rgba(0, 0, 0, 0.55), 0 32px 72px rgba(0, 0, 0, 0.6);

    --veil: rgba(20, 19, 15, 0.82);
    --scrim: rgba(0, 0, 0, 0.6);

    --tint-instagram: #35141E;  --ink-instagram: #F2879F;
    --tint-facebook:  #10203C;  --ink-facebook:  #7FAEFF;
    --tint-linkedin:  #0F2437;  --ink-linkedin:  #74B4E8;
    --tint-youtube:   #351414;  --ink-youtube:   #F98A8A;
}
}

/* --- Dark, forced by the toggle ----------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --canvas: var(--w-950);
    --surface: var(--w-925);
    --raised: var(--w-900);
    --sunken: var(--w-975);
    --tint: var(--w-925);
    --inset: var(--w-900);

    --ink: var(--w-100);
    --ink-2: var(--w-400);
    --ink-3: var(--w-500);
    --ink-faint: var(--w-600);

    --line: var(--w-850);
    --line-soft: var(--w-900);
    --line-strong: var(--w-800);

    /* On a near-black canvas the deep fill loses its edge, so dark mode flips
       the pairing: a brighter fill carrying dark ink. White on #D9451C is only
       4.36:1; ink on #E85F31 is 5.41:1, and that fill also clears the canvas
       at 5.41:1. */
    --accent: var(--r-400);
    --accent-fill: var(--r-400);
    --accent-fill-hover: var(--r-300);
    --accent-text: var(--r-300);
    --accent-soft: var(--r-900);
    --accent-soft-line: var(--r-950);
    --on-accent: var(--w-950);

    --pos: var(--pos-300);      --pos-bg: var(--pos-900);   --pos-fill: var(--pos-300);
    --neg: var(--neg-300);      --neg-bg: var(--neg-900);   --neg-fill: var(--neg-fill-dark);
    --warn: var(--warn-300);    --warn-bg: var(--warn-900);

    /* In dark, the inverted band goes light. */
    --invert-bg: var(--w-100);
    --invert-ink: var(--w-950);
    --invert-ink-2: var(--w-700);
    --invert-line: rgba(20, 19, 15, 0.12);
    --invert-accent: var(--r-700);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-pop: 0 8px 16px rgba(0, 0, 0, 0.55), 0 32px 72px rgba(0, 0, 0, 0.6);

    --veil: rgba(20, 19, 15, 0.82);
    --scrim: rgba(0, 0, 0, 0.6);

    --tint-instagram: #35141E;  --ink-instagram: #F2879F;
    --tint-facebook:  #10203C;  --ink-facebook:  #7FAEFF;
    --tint-linkedin:  #0F2437;  --ink-linkedin:  #74B4E8;
    --tint-youtube:   #351414;  --ink-youtube:   #F98A8A;
}