/* ============================================================================
   Nhập Lưu - design tokens
   Source of truth: docs/DESIGN_TOKENS.md

   THIS IS THE ONLY FILE IN THE APPLICATION PERMITTED TO CONTAIN A RAW HEX,
   A RAW FONT SIZE, OR A RAW RADIUS. Everything else references var(--token).
   NhapLuu.ArchitectureTests fails the build otherwise (CssTokenDisciplineTests).

   Three themes ship as admin-selectable presets (D-27); Warm Monastic is the
   default. They differ in token VALUES only - same token names, same markup,
   same components. Every theme must define every token; an architecture test
   asserts the three key sets are identical, because a theme that silently
   omits one just inherits Warm Monastic's value and nobody notices until the
   wrong green is in production.
   ========================================================================= */

/* ---- Theme value sets ---------------------------------------------------- */

:root,
[data-theme="warm-monastic"] {
  --surface-page:      #F7F3EA;
  --surface-card:      #FFFFFF;
  --surface-subtle:    #EDEADD;   /* chips, badges, avatars. NEVER muted text - see below. */

  --text-primary:      #26261F;
  --text-secondary:    #4A4A3E;   /* the Vietnamese pairing line */
  --text-muted:        #6B6B5E;
  --text-on-accent:    #FFFFFF;

  --accent:            #2B5D3F;
  --accent-hover:      #234E34;
  --accent-soft:       #4A5C40;

  --border-default:    #E4DDC9;   /* decorative only: 1.4:1 - 2.2:1 */
  --border-strong:     #C9C0A6;   /* decorative only */
  --border-control:    #7A7A6C;   /* >= 3:1 everywhere. Checkbox, radio and input boundaries. */

  --tier-adult-bg:     #EDEADD;
  --tier-adult-text:   #4A5C40;
  --tier-child-bg:     #F4E1C7;
  --tier-child-text:   #8A5A2B;
  --tier-free-bg:      #DCE7E2;
  --tier-free-text:    #2B5D3F;
  --avatar-bg:         #EDEADD;
  --avatar-text:       #4A5C40;

  --font-heading: "Lora", Cambria, "Palatino Linotype", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-control: 4px;
  --radius-panel:   4px;
}

[data-theme="quiet-paper"] {
  --surface-page:      #FAF8F3;
  --surface-card:      #FFFFFF;
  --surface-subtle:    #EDEADD;

  --text-primary:      #2C2C24;
  --text-secondary:    #4A4A3E;
  --text-muted:        #6F6F61;   /* CORRECTED from #7A7A6C, which measured 4.10:1 - below AA.
                                     It carries Vietnamese secondary lines, so this theme would
                                     have shipped with sub-standard Vietnamese. Now 4.80:1. */
  --text-on-accent:    #FFFFFF;

  --accent:            #4A6B52;
  --accent-hover:      #3E5B45;
  --accent-soft:       #4A6B52;

  --border-default:    #E2DCCB;
  --border-strong:     #C9C0A6;
  --border-control:    #7A7A6C;

  --tier-adult-bg:     #EDEADD;
  --tier-adult-text:   #4A6B52;
  --tier-child-bg:     #F4E1C7;
  --tier-child-text:   #8A5A2B;
  --tier-free-bg:      #DCE7E2;
  --tier-free-text:    #4A6B52;
  --avatar-bg:         #EDEADD;
  --avatar-text:       #4A6B52;

  --font-heading: "Source Serif 4", Cambria, "Palatino Linotype", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-control: 2px;
  --radius-panel:   2px;
}

[data-theme="structured-calm"] {
  --surface-page:      #F0EAD9;
  --surface-card:      #FFFFFF;
  --surface-subtle:    #EEF3EA;

  --text-primary:      #22281F;
  --text-secondary:    #3C3C32;
  --text-muted:        #5F6B57;
  --text-on-accent:    #FFFFFF;

  --accent:            #1F4D3A;
  --accent-hover:      #183D2D;
  --accent-soft:       #1F4D3A;

  --border-default:    #DCD3B8;
  --border-strong:     #B7AD8E;
  --border-control:    #7A7A6C;

  --tier-adult-bg:     #EEF3EA;
  --tier-adult-text:   #1F4D3A;
  --tier-child-bg:     #F6E4CE;
  --tier-child-text:   #8A5A2B;
  --tier-free-bg:      #DCE7E2;
  --tier-free-text:    #1F4D3A;
  --avatar-bg:         #EEF3EA;
  --avatar-text:       #1F4D3A;

  /* Structured Calm's 700/800 weights stay REMOVED (R-08); the avoid-bold rule still binds. Its
     left-rail step navigation is RESTORED on desktop/tablet (D-41) - see .rail in app.css - while
     mobile keeps the shared top counter. This is the one theme whose markup differs, not only tokens. */
  --font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-control: 6px;
  --radius-panel:   6px;
}

/* ---- Shared across every theme ------------------------------------------ */

:root {
  /* -- Feedback and state -------------------------------------------------
     DESIGN_TOKENS.md 3.6 deliberately left these undefined at Stage 0b ("the
     handoff contains no such state and I will not invent a palette for one")
     and deferred them to Stage 1. This is Stage 1. They are theme-independent,
     like --danger, because a warning must not become quieter in one theme.

     Every figure below was COMPUTED against the WCAG 2.1 relative-luminance
     formula, not estimated. Text floor 4.5:1; non-text 3:1.

       --success on --surface-card ....... 6.35    on page 5.28 - 5.98
       --success on --success-bg ......... 5.01
       --warning on --surface-card ....... 5.87    on page 4.88 - 5.53
       --warning on --warning-bg ......... 4.60  <- thin. Re-measure if touched.
       --danger  on --surface-card ....... 6.22    on page 5.18 - 5.86
       --danger  on --danger-bg .......... 5.19

     There is deliberately NO --info colour. An informational notice uses
     --surface-subtle with --text-primary and a --border-strong rule: it needs
     no hue of its own, and inventing a blue would put a colour in the palette
     that no designer chose. */
  --success:    #2E6B46;
  --success-bg: #DCE7E2;
  --warning:    #8A5A2B;
  --warning-bg: #F4E1C7;
  --danger:     #A3413A;
  --danger-bg:  #F7E7E5;

  /* Disabled. White on this fill measures 5.40:1 - we hold disabled controls to
     the normal text floor even though WCAG 1.4.3 exempts them, because this
     audience is older and a greyed-out control they cannot read is a control
     they cannot understand the state of. Prefer not disabling at all: let the
     button be pressed and explain what is missing. */
  --disabled-fill: #6B6B5E;
  --disabled-text: #FFFFFF;

  /* -- Admin chrome (D-17 staff area) -------------------------------------
     The administration shell is theme-INDEPENDENT: staff tooling is never
     re-themed by the three public presets, so - like the feedback colours
     above - it lives in this SHARED block, not in the three theme blocks. A
     dark left rail sets the staff side visibly apart from the public site
     (brief §9; the admin-shell handoff), which is a safety property, not a
     decoration: an administrator must never be in doubt which side of the
     fence they are on. Contrast on the dark rail was COMPUTED, not estimated:
       --admin-nav-text        on --admin-nav-surface .... 11.8:1
       --admin-nav-text-muted  on --admin-nav-surface ..... 6.6:1  (labels, session note) */
  --admin-nav-surface:        #22352B;
  --admin-nav-surface-active: #314B3D;
  --admin-nav-text:           #F2EFE6;
  --admin-nav-text-muted:     #AEBCB3;
  --admin-nav-hover:          #2C4235;
  --admin-nav-divider:        #3C5648;

  /* The three public theme presets, as swatches in the admin theme picker. These are each theme's own
     accent green (from the theme blocks above) held as fixed values here, because the picker must show
     all three at once - it cannot use the single live --accent, which is whichever theme is active. */
  --admin-swatch-warm-monastic:   #2B5D3F;
  --admin-swatch-quiet-paper:     #4A6B52;
  --admin-swatch-structured-calm: #1F4D3A;

  /* -- Type scale ---------------------------------------------------------
     Nothing below 16px exists in the vocabulary, so the floor cannot be
     violated by reaching for the wrong token. Public body >= 18px, controls
     >= 16px (brief 12). The handoff had 22 sizes, 1,164 of 1,376 declarations
     below the 18px floor. These eight replace all of them. */
  --font-size-meta:      16px;   /* the floor: pills, tags, captions */
  --font-size-secondary: 16px;   /* the Vietnamese pairing line */
  --font-size-body:      18px;   /* public body text - the default */
  --font-size-control:   18px;   /* inputs and buttons - above the 16px floor, on purpose */
  --font-size-lead:      20px;
  --font-size-h3:        24px;
  --font-size-h2:        30px;
  --font-size-h1:        38px;   /* reduced from the handoff's 42-46px: Vietnamese headings run
                                    15-30% longer and an oversized H1 wraps badly at 390px */

  --line-height-tight: 1.3;
  --line-height-body:  1.5;

  /* 600 is the ceiling. No 700, no 800. "Weight is for hierarchy, not
     emphasis-by-default" (brief 12). */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* One 4px scale, shared by all three themes. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-emphasis: 2px;

  --elevation-card: none;   /* flat. The prototype's box-shadow belongs to the reviewer frame. */

  --tap-min: 44px;          /* every interactive target, no exceptions (brief 12) */

  /* -- Focus --------------------------------------------------------------
     THE OFFSET IS LOAD-BEARING. --focus-ring is --accent, and a primary
     button's fill is ALSO --accent. Drawn at zero offset the ring would be
     accent-on-accent: contrast 1.00, i.e. invisible, on the single most
     important control on the page. At 2px offset it sits on the page
     background instead, measuring 6.92 (Warm) / 5.63 (Quiet) / 8.01 (Calm).
     Do not "tidy up" the offset. */
  --focus-ring:   var(--accent);
  --focus-width:  3px;
  --focus-offset: 2px;
}

/* ---- Narrow screens ------------------------------------------------------
   The type scale lives here and ONLY here, so the responsive override lives
   here too rather than in app.css. Headings shrink because Vietnamese runs
   15-30% longer than English and a 38px H1 wraps badly at 390px.

   Body, control and secondary sizes are ABSENT from this block on purpose.
   18px is a floor, not a starting point, and it is the same floor on a phone
   as on a desktop. Nothing here may shrink them. */
@container app (max-width: 40rem) {
  /* Set on .page, not :root - a container cannot restyle the element being queried, and :root is not
     inside the container anyway. A CONTAINER query, not a media query, for the same reason as
     app.css: one rule, obeyed by both a real phone and the reviewer's device frame. */
  .page {
    --font-size-h1: 30px;
    --font-size-h2: 24px;
  }
}

/* Someone who has asked their operating system to stop moving things gets a
   still interface. Locked by the elder-first rules. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}