/* =============================================================================
   שעת אור · Golden Hour — Design System · Part A
   tokens.css — single source of truth: color, type, spacing, radius, shadow, motif.
   Hebrew-first, full RTL. Warm "golden-hour" identity (honey + warm paper).
   ============================================================================= */

/* ---- Fonts: Fredoka (display, Hebrew) + Assistant (body) + mono ------------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Assistant:wght@400;500;600;700&family=Rubik:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================================
     COLOR — שעת אור: honey + warm paper dominate; coral/sky/sprout are accents.
     Contrast ratios are measured (WCAG 2.1). AA normal ≥ 4.5, AA large ≥ 3.0.
     ========================================================================= */

  /* Primary — golden hour honey/amber. Pairs with INK text (white only on large). */
  --color-primary:        #E8A33D;  /* honey · ink text 7.04:1 AA */
  --color-primary-deep:   #C97E1E;  /* deep amber · ink 4.69:1 AA · pressed/edges */
  --color-primary-soft:   #F6D8A0;  /* soft honey · ink 11.0:1 */
  --color-primary-tint:   #FCEFD6;  /* tint surface · ink 13.3:1 */
  --color-amber-ink:      #9E5B0C;  /* deep amber for interactive TEXT / links · white 5.0:1 */

  /* Ink — grounding warm near-black (never cold gray) */
  --color-ink:            #2A2520;  /* primary text · 14.1:1 on paper */
  --color-ink-soft:       #6B6157;  /* secondary text · 5.6:1 on paper */
  --color-ink-faint:      #A89B88;  /* disabled fg (exempt from AA) */
  --color-on-primary:     #2A2520;  /* text/icon ON honey fills = ink */
  --color-on-deep:        #FFFFFF;  /* white only on deep amber for LARGE text */

  /* Warm paper backgrounds (never pure cold white) */
  --color-bg:             #FBF6EC;  /* app background — warm paper */
  --color-surface:        #FFFFFF;  /* cards, sheets, fields */
  --color-surface-warm:   #FFFDF8;  /* warm-tinted surface */
  --color-surface-sunk:   #F4ECDC;  /* sunken / inset wells */
  --color-border:         #E7DCC6;  /* hairline separators, field borders */
  --color-border-strong:  #D8C7A6;  /* emphasized field border */

  /* Secondary accents (sunset) — used sparingly */
  --color-coral:          #E76F51;  --color-coral-deep:  #B8442E;  --color-coral-tint:  #FBE4DD;
  --color-sky:            #5B8BA0;  --color-sky-deep:    #3D6B80;  --color-sky-tint:    #E1ECF1;
  --color-sprout:         #7FA650;  --color-sprout-deep: #4E8233;  --color-sprout-tint: #EAF1DC;

  /* Semantic — base + accessible strong fill (white text) + soft tint */
  --color-success:        #5E9C3E;  --color-success-strong: #447A2C;  --color-success-tint: #EAF1DC;
  --color-warning:        #E5A53B;  --color-warning-strong: #8A5A12;  --color-warning-tint: #FCEFD0;
  --color-error:          #D64A3F;  --color-error-strong:   #C13B2E;  --color-error-tint:   #FBE3E0;
  --color-info:           #5B8BA0;  --color-info-strong:    #3D6B80;  --color-info-tint:    #E1ECF1;

  /* On-tint text colors (status chips) — each ≥ 5:1 on its tint */
  --on-success-tint: #2F6B22;
  --on-warning-tint: #8A5A12;
  --on-error-tint:   #B23227;
  --on-info-tint:    #345E72;
  --on-coral-tint:   #A53C24;

  /* Focus rings — honey by default, coral for errors */
  --focus-ring:       0 0 0 3px rgba(232, 163, 61, 0.50);
  --focus-ring-error: 0 0 0 3px rgba(214, 74, 63, 0.38);

  /* =========================================================================
     TYPOGRAPHY — Fredoka (display) + Assistant (body)
     ========================================================================= */
  --font-display: "Fredoka", "Rubik", "Assistant", system-ui, sans-serif;
  --font-sans:    "Assistant", "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* role: size / line-height / weight */
  --fs-display: 34px;  --lh-display: 42px;  --fw-display: 600;
  --fs-h1:      28px;  --lh-h1:      36px;  --fw-h1:      600;
  --fs-h2:      22px;  --lh-h2:      30px;  --fw-h2:      600;
  --fs-h3:      18px;  --lh-h3:      26px;  --fw-h3:      600;
  --fs-body-l:  18px;  --lh-body-l:  28px;  --fw-body-l:  400;
  --fs-body:    16px;  --lh-body:    24px;  --fw-body:    400;
  --fs-body-s:  14px;  --lh-body-s:  22px;  --fw-body-s:  400;
  --fs-caption: 13px;  --lh-caption: 18px;  --fw-caption: 400;
  --fs-button:  17px;  --lh-button:  24px;  --fw-button:  600;
  --fs-count:   56px;  --lh-count:   60px;  /* celebratory attendance number */

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

  /* =========================================================================
     SPACING — 4pt base grid
     ========================================================================= */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;

  /* =========================================================================
     RADII — generous & soft. Nothing sharp.
     ========================================================================= */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* =========================================================================
     ELEVATION — soft, warm-tinted (never cold gray)
     ========================================================================= */
  --shadow-sm: 0 1px 2px rgba(94, 64, 18, 0.07), 0 1px 1px rgba(94, 64, 18, 0.05);
  --shadow-md: 0 6px 20px rgba(94, 64, 18, 0.10), 0 2px 6px rgba(94, 64, 18, 0.06);
  --shadow-lg: 0 20px 48px rgba(94, 64, 18, 0.16), 0 6px 16px rgba(94, 64, 18, 0.08);

  /* =========================================================================
     MOTIF — the signature soft ARCH (rounded-top doorway / hill / sun-crest)
     ========================================================================= */
  --arch-top: 999px;                 /* top corners → full dome */
  --arch-foot: var(--radius-lg);     /* feet → soft */

  /* Faint warm paper grain (very light) — apply to backgrounds with .paper */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  /* Golden-hour wash used on splash/headers */
  --golden-wash: radial-gradient(120% 90% at 78% 6%, rgba(246,216,160,0.55) 0%, rgba(246,216,160,0) 48%),
                 linear-gradient(168deg, #F2B85A 0%, var(--color-primary) 44%, var(--color-primary-deep) 100%);

  /* =========================================================================
     LAYOUT & MOTION
     ========================================================================= */
  --content-width: 390px;
  --gutter:        16px;
  --touch-min:     44px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
}

/* =============================================================================
   BASE — apply Assistant + RTL defaults. Use class="ds" (or html[dir=rtl]).
   ============================================================================= */
.ds, .ds * { box-sizing: border-box; }
.ds {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerals for counts, timers, OTP, phone, dates */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* LTR islands inside RTL (phone digits, code, version strings) */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* =============================================================================
   TYPE UTILITY CLASSES — map 1:1 to the named type tokens
   ============================================================================= */
.t-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: 0; }
.t-h1      { font-family: var(--font-display); font-size: var(--fs-h1);      line-height: var(--lh-h1);      font-weight: var(--fw-h1); }
.t-h2      { font-family: var(--font-display); font-size: var(--fs-h2);      line-height: var(--lh-h2);      font-weight: var(--fw-h2); }
.t-h3      { font-family: var(--font-display); font-size: var(--fs-h3);      line-height: var(--lh-h3);      font-weight: var(--fw-h3); }
.t-body-l  { font-size: var(--fs-body-l);  line-height: var(--lh-body-l);  font-weight: var(--fw-body-l); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body);    font-weight: var(--fw-body); }
.t-body-s  { font-size: var(--fs-body-s);  line-height: var(--lh-body-s);  font-weight: var(--fw-body-s); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); color: var(--color-ink-soft); }
.t-button  { font-size: var(--fs-button);  line-height: var(--lh-button);  font-weight: var(--fw-button); }
.t-count   { font-family: var(--font-display); font-size: var(--fs-count); line-height: var(--lh-count); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* =============================================================================
   DARK THEME — golden-hour-at-dusk mapping (documentation / stretch).
   Apply with [data-theme="dark"]. Same token names, dusk values.
   ============================================================================= */
[data-theme="dark"] {
  --color-primary:        #F0B254;  --color-primary-deep: #E8A33D;
  --color-primary-soft:   #5A431F;  --color-primary-tint: #3A2C16;  --color-amber-ink: #F0B254;
  --color-ink:            #F4ECDE;  --color-ink-soft: #B9AC98;  --color-ink-faint: #6B6157;
  --color-on-primary:     #2A2520;  --color-on-deep: #2A2520;
  --color-bg:             #1A1611;  --color-surface: #241F18;  --color-surface-warm: #2A241C;
  --color-surface-sunk:   #15110C;  --color-border: #392F22;  --color-border-strong: #51442F;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.6);
}