/* ===========================================================================
   Choice One Rx — Design Tokens
   THE single source of design truth. Every other stylesheet consumes these.
   Do not redeclare :root{--c1-*} anywhere else.

   Brand colors sampled directly from the client logo (brand/choice-one-rx-logo.png):
     teal  #0CC1BA   ink  #0C1A23
   =========================================================================== */

:root {
  /* ---- Brand: teal ------------------------------------------------------ */
  --c1-teal-50:  #ECFDFC;
  --c1-teal-100: #CFF8F6;
  --c1-teal-200: #9FF0EC;
  --c1-teal-300: #63E2DD;
  --c1-teal-400: #2ACFC9;
  --c1-teal-500: #0CC1BA;   /* ← exact logo teal */
  --c1-teal-600: #069C97;
  --c1-teal-700: #097C79;
  --c1-teal-800: #0D6360;
  --c1-teal-900: #0F5250;
  --c1-teal-950: #033533;

  /* ---- Brand: ink ------------------------------------------------------- */
  --c1-ink-50:  #F5F7F8;
  --c1-ink-100: #E6EBED;
  --c1-ink-200: #CDD6DA;
  --c1-ink-300: #A3B3BA;
  --c1-ink-400: #718994;
  --c1-ink-500: #4F6873;
  --c1-ink-600: #3B505A;
  --c1-ink-700: #2C3D46;
  --c1-ink-800: #1B2A33;
  --c1-ink-900: #0C1A23;   /* ← exact logo ink */
  --c1-ink-950: #06121A;

  /* ---- Semantic ---------------------------------------------------------
     Each foreground is dark enough to clear WCAG AA (4.5:1) against BOTH its
     own tinted background and plain white, because these colors are used for
     small text in callouts and badges. Measured, not eyeballed — see the
     contrast table in HANDOFF.md.                                            */
  --c1-success:     #0B7A44;
  --c1-success-bg:  #E8F6EE;
  --c1-warn:        #8A5407;
  --c1-warn-bg:     #FDF3E2;
  --c1-danger:      #C62B34;
  --c1-danger-bg:   #FDECEC;
  --c1-info:        #1560B8;
  --c1-info-bg:     #E9F1FC;

  /* ---- Referral pipeline status ----------------------------------------
     Each stage of the specialty referral lifecycle gets a stable color so a
     prescriber learns the palette once. Muted → active → resolved.          */
  --c1-status-received:   #6B7C86;
  --c1-status-benefits:   #1B6FD1;
  --c1-status-pa:         #B8720B;
  --c1-status-pa-denied:  #C62B34;
  --c1-status-financial:  #7A4FCF;
  --c1-status-outreach:   #0891A8;
  --c1-status-scheduled:  #069C97;
  --c1-status-shipped:    #0CC1BA;
  --c1-status-active:     #0F9D58;
  --c1-status-refill:     #B8720B;
  --c1-status-inactive:   #8B98A0;

  /* ---- Surfaces (light) ------------------------------------------------- */
  --c1-bg:          #FFFFFF;
  --c1-bg-subtle:   #F7FAFA;
  --c1-bg-sunken:   #EFF4F5;
  --c1-surface:     #FFFFFF;
  --c1-surface-2:   #F7FAFA;
  --c1-overlay:     rgba(12, 26, 35, .55);

  /* ---- Text ------------------------------------------------------------- */
  --c1-text:        var(--c1-ink-900);
  --c1-text-muted:  var(--c1-ink-500);
  /* Not ink-400 — that measures 3.68:1 on white and fails AA for the small
     text this is actually used for (timestamps, field hints, table captions). */
  --c1-text-subtle: #5C7480;
  --c1-text-invert: #FFFFFF;
  --c1-link:        var(--c1-teal-700);
  --c1-link-hover:  var(--c1-teal-800);

  /* ---- Borders ---------------------------------------------------------- */
  --c1-border:        #E1E9EB;
  --c1-border-strong: #C9D6DA;
  --c1-border-focus:  var(--c1-teal-500);

  /* ---- Typography -------------------------------------------------------
     Two faces, sharply divided by job:
       Newsreader (serif) — display only. Authority and institution.
       Inter — everything else: UI, body, labels, and all data.

     The expensive-looking part is not either face on its own; it is the SIZE
     CONTRAST between them. A 76px serif headline sitting next to an 11px
     letterspaced Inter label is what reads considered. A deck of 24px headings
     and 16px body — evenly spaced, evenly weighted — is what reads generic.  */
  --c1-font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --c1-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --c1-font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale — deliberately wide range. */
  --c1-fs-xs:   0.75rem;      /* 12 — labels, meta */
  --c1-fs-sm:   0.8125rem;    /* 13 — UI, table text */
  --c1-fs-base: 1rem;         /* 16 */
  --c1-fs-md:   1.0625rem;    /* 17 */
  --c1-fs-lg:   clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
  --c1-fs-xl:   clamp(1.5rem,  1.28rem + 0.95vw, 2.125rem);
  --c1-fs-2xl:  clamp(2rem,    1.55rem + 1.95vw, 3.25rem);
  --c1-fs-3xl:  clamp(2.75rem, 1.95rem + 3.5vw,  4.75rem);
  --c1-fs-4xl:  clamp(3.25rem, 2.1rem + 5.1vw,   6.5rem);

  --c1-lh-tight: 1.04;   /* display — serif at scale wants to sit close */
  --c1-lh-snug:  1.22;
  --c1-lh-base:  1.62;

  /* Serif needs far less negative tracking than a grotesk. */
  --c1-tracking-display: -0.012em;
  --c1-tracking-tight:   -0.014em;
  --c1-tracking-wide:     0.14em;   /* labels — wide enough to read as a rule */

  /* ---- Space (4px base) ------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* Section rhythm — the vertical beat of the marketing pages */
  --c1-section-y: clamp(56px, 8vw, 112px);
  --c1-gutter:    clamp(20px, 4vw, 32px);
  --c1-maxw:      1200px;
  --c1-maxw-prose: 68ch;

  /* ---- Radius -----------------------------------------------------------
     Small and consistent. Large radii and pill buttons read consumer-friendly;
     institutions square up. 4px is the workhorse.                            */
  --c1-r-sm:   3px;
  --c1-r:      4px;
  --c1-r-md:   6px;
  --c1-r-lg:   8px;
  --c1-r-xl:   12px;
  --c1-r-pill: 999px;   /* retained for status dots and true pills only */

  /* ---- Elevation --------------------------------------------------------
     Structure comes from HAIRLINES, not shadows. A page where every element
     floats on its own drop shadow reads like a component library demo. These
     are deliberately near-invisible; the top two exist only for genuinely
     floating UI (menus, modals, toasts).                                     */
  --c1-shadow-0: none;
  --c1-shadow-1: none;
  --c1-shadow-2: 0 1px 2px rgba(12, 26, 35, .04);
  --c1-shadow-3: 0 12px 28px -12px rgba(12, 26, 35, .18), 0 2px 6px rgba(12, 26, 35, .05);
  --c1-shadow-4: 0 32px 64px -24px rgba(12, 26, 35, .28), 0 4px 12px rgba(12, 26, 35, .07);
  --c1-shadow-teal: none;
  --c1-ring: 0 0 0 3px rgba(12, 193, 186, .28);

  /* Hairline — the primary structural device. */
  --c1-hair: 1px solid var(--c1-border);
  --c1-hair-strong: 1px solid var(--c1-border-strong);

  /* ---- Motion ----------------------------------------------------------- */
  --c1-ease:      cubic-bezier(.22, .61, .36, 1);
  --c1-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --c1-ease-in:   cubic-bezier(.55, .06, .68, .19);
  --c1-dur-1: 120ms;
  --c1-dur-2: 200ms;
  --c1-dur-3: 320ms;
  --c1-dur-4: 520ms;
  --c1-lift:  translateY(-3px);

  /* ---- Z ---------------------------------------------------------------- */
  --c1-z-base: 1;
  --c1-z-sticky: 100;
  --c1-z-header: 200;
  --c1-z-drawer: 300;
  --c1-z-modal: 400;
  --c1-z-toast: 500;
}

/* ===========================================================================
   Dark theme
   Applies on system preference, and can be forced with [data-theme].
   Only surfaces/text/borders flip — brand hues stay recognizable, lifted
   slightly in luminance so teal keeps AA contrast on dark ink.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c1-bg:        #08141B;
    --c1-bg-subtle: #0C1A23;
    --c1-bg-sunken: #061117;
    --c1-surface:   #10222C;
    --c1-surface-2: #162B36;
    --c1-overlay:   rgba(3, 10, 14, .7);

    --c1-text:        #E8F0F2;
    --c1-text-muted:  #9DB0B8;
    --c1-text-subtle: #7A8F98;
    --c1-text-invert: #06121A;
    --c1-link:        var(--c1-teal-300);
    --c1-link-hover:  var(--c1-teal-200);

    --c1-border:        #223642;
    --c1-border-strong: #314A57;

    --c1-success:    #35C87F;  --c1-success-bg: #0E2A1E;
    --c1-warn:       #E0A64A;  --c1-warn-bg:    #2C2210;
    --c1-danger:     #F2666E;  --c1-danger-bg:  #2E1416;
    --c1-info:       #5AA2F0;  --c1-info-bg:    #0F2337;

    --c1-status-received:  #90A2AC;
    --c1-status-benefits:  #5AA2F0;
    --c1-status-pa:        #E0A64A;
    --c1-status-pa-denied: #F2666E;
    --c1-status-financial: #A98AE6;
    --c1-status-outreach:  #2FB6CC;
    --c1-status-scheduled: #2ACFC9;
    --c1-status-shipped:   #63E2DD;
    --c1-status-active:    #35C87F;
    --c1-status-refill:    #E0A64A;
    --c1-status-inactive:  #7A8F98;

    --c1-shadow-0: 0 1px 2px rgba(0, 0, 0, .4);
    --c1-shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
    --c1-shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45);
    --c1-shadow-3: 0 4px 8px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .55);
    --c1-shadow-4: 0 8px 16px rgba(0, 0, 0, .45), 0 32px 72px rgba(0, 0, 0, .6);
    --c1-shadow-teal: 0 6px 20px rgba(12, 193, 186, .3);
    --c1-ring: 0 0 0 3px rgba(42, 207, 201, .4);
  }
}

/* Explicit override so a theme toggle can win in both directions */
:root[data-theme="dark"] {
  --c1-bg:        #08141B;
  --c1-bg-subtle: #0C1A23;
  --c1-bg-sunken: #061117;
  --c1-surface:   #10222C;
  --c1-surface-2: #162B36;
  --c1-overlay:   rgba(3, 10, 14, .7);

  --c1-text:        #E8F0F2;
  --c1-text-muted:  #9DB0B8;
  --c1-text-subtle: #7A8F98;
  --c1-text-invert: #06121A;
  --c1-link:        var(--c1-teal-300);
  --c1-link-hover:  var(--c1-teal-200);

  --c1-border:        #223642;
  --c1-border-strong: #314A57;

  --c1-success:    #35C87F;  --c1-success-bg: #0E2A1E;
  --c1-warn:       #E0A64A;  --c1-warn-bg:    #2C2210;
  --c1-danger:     #F2666E;  --c1-danger-bg:  #2E1416;
  --c1-info:       #5AA2F0;  --c1-info-bg:    #0F2337;

  --c1-status-received:  #90A2AC;
  --c1-status-benefits:  #5AA2F0;
  --c1-status-pa:        #E0A64A;
  --c1-status-pa-denied: #F2666E;
  --c1-status-financial: #A98AE6;
  --c1-status-outreach:  #2FB6CC;
  --c1-status-scheduled: #2ACFC9;
  --c1-status-shipped:   #63E2DD;
  --c1-status-active:    #35C87F;
  --c1-status-refill:    #E0A64A;
  --c1-status-inactive:  #7A8F98;

  --c1-shadow-0: 0 1px 2px rgba(0, 0, 0, .4);
  --c1-shadow-1: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --c1-shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .45);
  --c1-shadow-3: 0 4px 8px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .55);
  --c1-shadow-4: 0 8px 16px rgba(0, 0, 0, .45), 0 32px 72px rgba(0, 0, 0, .6);
  --c1-shadow-teal: 0 6px 20px rgba(12, 193, 186, .3);
  --c1-ring: 0 0 0 3px rgba(42, 207, 201, .4);
}