/* ==========================================================================
   Alewa Design System — Tokens
   The single source of truth. Components never hardcode a value.
   Light is the default. Dark follows the system unless data-theme is set.
   ========================================================================== */

:root {
  /* ---- Brand surfaces ------------------------------------------------- */
  --a-bg:              #FBF5E4;  /* the page itself, warm cream */
  --a-surface:         #FFFFFF;  /* raised things: cards, rows, sheets */
  --a-surface-sunk:    #FBF7EA;  /* inset things: draft bodies, wells */
  --a-surface-tint:    #FDF9EC;  /* quiet cards that sit on the page */
  --a-surface-veil:    rgba(251, 245, 228, .88); /* sticky bars */

  /* ---- Ink ------------------------------------------------------------ */
  --a-ink:             #171412;  /* headlines, primary text */
  --a-ink-muted:       #6D675C;  /* body text, descriptions */
  --a-ink-soft:        #A39C8E;  /* labels, metadata, timestamps */
  --a-ink-inverse:     #FBF5E4;

  /* ---- Lines ---------------------------------------------------------- */
  --a-line:            #ECE4D0;
  --a-line-strong:     #DDD4BD;
  --a-line-dashed:     #E3DBC4;

  /* ---- Signals --------------------------------------------------------
     These are named for what they mean in Alewa, not for what colour they
     are. A row is amber because it needs you, not because amber is pretty. */
  --a-needs-you:       #F5BA4B;  /* top of your day, wants attention */
  --a-needs-you-wash:  #FDF1DC;
  --a-needs-you-edge:  #ECCF9B;

  --a-handled:         #2FAE53;  /* sent, approved, done */
  --a-handled-wash:    #E8F6EC;

  --a-reason:          #2F6FED;  /* why Alewa ranked it, links */
  --a-reason-ink:      #2A56B8;
  --a-reason-wash:     #EEF3FF;

  --a-danger:          #D94F3D;  /* disconnect, delete, destructive */
  --a-danger-wash:     #FDECE9;

  --a-quiet:           #A39C8E;  /* set aside, out of your way */

  --a-attention-ink:   #8A6318;  /* text on a needs-you wash */
  --a-roadmap-wash:    #EFE6CD;  /* promised, not shipped */
  --a-roadmap-ink:     #8A7D55;

  /* ---- Type ----------------------------------------------------------- */
  --a-font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --a-font-text:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --a-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Display sizes carry tighter tracking as they grow. */
  --a-size-display-xl: clamp(2.9rem, 7.6vw, 5.6rem);
  --a-size-display-l:  clamp(2.2rem, 4.8vw, 3.7rem);
  --a-size-display-m:  clamp(1.7rem, 3.4vw, 2.5rem);
  --a-size-title:      1.5rem;
  --a-size-subtitle:   1.22rem;
  --a-size-body-l:     1.12rem;
  --a-size-body:       1rem;
  --a-size-body-s:     .92rem;
  --a-size-label:      .86rem;
  --a-size-micro:      .74rem;

  --a-track-display-xl: -.04em;
  --a-track-display:    -.035em;
  --a-track-title:      -.025em;
  --a-track-body:       0;
  --a-track-caps:       .16em;

  --a-weight-display:  800;
  --a-weight-strong:   700;
  --a-weight-medium:   600;
  --a-weight-body:     400;

  --a-leading-tight:   1.08;
  --a-leading-snug:    1.3;
  --a-leading-body:    1.55;
  --a-leading-relaxed: 1.75;

  /* ---- Space (4px base) ----------------------------------------------- */
  --a-space-1:   4px;
  --a-space-2:   8px;
  --a-space-3:  12px;
  --a-space-4:  16px;
  --a-space-5:  20px;
  --a-space-6:  24px;
  --a-space-8:  32px;
  --a-space-10: 40px;
  --a-space-12: 48px;
  --a-space-16: 64px;
  --a-space-20: 80px;
  --a-space-28: 110px;   /* section rhythm */

  /* ---- Radius ---------------------------------------------------------
     Round more than feels necessary. Sharp corners read as unfinished. */
  --a-radius-xs:   10px;  /* tags, small inline things */
  --a-radius-sm:   14px;  /* icon tiles, inputs */
  --a-radius-md:   18px;  /* nested panels */
  --a-radius-lg:   22px;  /* list rows */
  --a-radius-xl:   28px;  /* cards */
  --a-radius-2xl:  34px;  /* large surfaces, sheets */
  --a-radius-pill: 999px; /* every button, every chip */

  /* ---- Elevation ------------------------------------------------------
     Warm shadows. A cool grey shadow on cream looks dirty. */
  --a-shadow-sm: 0 12px 28px rgba(23, 20, 18, .07);
  --a-shadow-md: 0 16px 36px rgba(23, 20, 18, .09);
  --a-shadow-lg: 0 26px 60px rgba(23, 20, 18, .10);
  --a-shadow-xl: 0 40px 90px rgba(23, 20, 18, .14);

  /* ---- Motion ---------------------------------------------------------- */
  --a-ease:         cubic-bezier(.2, .7, .3, 1);
  --a-duration-1:  120ms;  /* colour, opacity */
  --a-duration-2:  160ms;  /* hover lift */
  --a-duration-3:  220ms;  /* panels, reveals */
  --a-lift:        translateY(-2px);

  /* ---- Focus ----------------------------------------------------------- */
  --a-focus-ring:   0 0 0 3px rgba(47, 111, 237, .35);
  --a-focus-offset: 2px;

  /* ---- Layout ---------------------------------------------------------- */
  --a-container:   1120px;
  --a-measure:     58ch;   /* body copy never runs wider than this */
  --a-measure-display: 22ch;
}

/* ==========================================================================
   Dark. Still warm: the neutrals keep a little yellow so it reads as the
   same product with the lights off, not a different app.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-bg:            #14120E;
    --a-surface:       #1F1C16;
    --a-surface-sunk:  #191710;
    --a-surface-tint:  #1B1813;
    --a-surface-veil:  rgba(20, 18, 14, .88);

    --a-ink:           #F7F1E1;
    --a-ink-muted:     #ACA595;
    --a-ink-soft:      #7C7566;
    --a-ink-inverse:   #171412;

    --a-line:          #2E2A22;
    --a-line-strong:   #3A352B;
    --a-line-dashed:   #35302708;

    --a-needs-you-wash: #33291699;
    --a-needs-you-edge: #6A5730;
    --a-handled:        #45C06A;
    --a-handled-wash:   #16301F99;
    --a-reason:         #7BA4FF;
    --a-reason-ink:     #A8C2FF;
    --a-reason-wash:    #1B2544;
    --a-danger:         #F0705F;
    --a-danger-wash:    #38191599;
    --a-attention-ink:  #E8C079;
    --a-roadmap-wash:   #2C271A;
    --a-roadmap-ink:    #C4B588;

    --a-shadow-sm: 0 12px 28px rgba(0, 0, 0, .35);
    --a-shadow-md: 0 16px 36px rgba(0, 0, 0, .40);
    --a-shadow-lg: 0 26px 60px rgba(0, 0, 0, .45);
    --a-shadow-xl: 0 40px 90px rgba(0, 0, 0, .50);
  }
}

:root[data-theme="dark"] {
  --a-bg:            #14120E;
  --a-surface:       #1F1C16;
  --a-surface-sunk:  #191710;
  --a-surface-tint:  #1B1813;
  --a-surface-veil:  rgba(20, 18, 14, .88);

  --a-ink:           #F7F1E1;
  --a-ink-muted:     #ACA595;
  --a-ink-soft:      #7C7566;
  --a-ink-inverse:   #171412;

  --a-line:          #2E2A22;
  --a-line-strong:   #3A352B;
  --a-line-dashed:   #353027;

  --a-needs-you-wash: #33291699;
  --a-needs-you-edge: #6A5730;
  --a-handled:        #45C06A;
  --a-handled-wash:   #16301F99;
  --a-reason:         #7BA4FF;
  --a-reason-ink:     #A8C2FF;
  --a-reason-wash:    #1B2544;
  --a-danger:         #F0705F;
  --a-danger-wash:    #38191599;

  --a-shadow-sm: 0 12px 28px rgba(0, 0, 0, .35);
  --a-shadow-md: 0 16px 36px rgba(0, 0, 0, .40);
  --a-shadow-lg: 0 26px 60px rgba(0, 0, 0, .45);
  --a-shadow-xl: 0 40px 90px rgba(0, 0, 0, .50);
}