/* ============================================================================
   SkinJourney — Design Tokens v2  (colors + type foundations)
   "Beauty exists in the process." Calm, warm, sage-green wellness.
   RTL / Hebrew-first. Anchored on the shipping v1 hues, elevated into a
   disciplined tonal system. Drop these vars into any HTML mock.
   ============================================================================ */

/* ----- Fonts ------------------------------------------------------------- */
/* Assistant ships in the app (excellent Hebrew). Loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ======================================================================
     1. COLOR RAMPS  (50 → 900, drawn from v1 brand hues)
     ====================================================================== */

  /* --- Sage (primary) — anchor #496459 (v1 primary), #A8C5B8 (v1 container) */
  --sage-50:  #F2F7F4;
  --sage-100: #E3EDE7;
  --sage-200: #C8DBD0;
  --sage-300: #A8C5B8;   /* v1 primaryContainer */
  --sage-400: #82A695;
  --sage-500: #5F8273;
  --sage-600: #496459;   /* v1 primary  ← brand anchor */
  --sage-700: #3B5249;
  --sage-800: #2D3E37;
  --sage-900: #1E2B26;

  /* --- Sand neutrals — near-white, whisper of warmth (brightened v2.2) */
  --sand-50:  #FFFFFF;   /* pure white — brightest surface */
  --sand-100: #FCFBF9;   /* app background — reads white, barely-warm */
  --sand-200: #F6F5F1;
  --sand-300: #EDECE7;
  --sand-400: #DEDCD4;
  --sand-500: #BAB7AE;
  --sand-600: #8C8980;
  --sand-700: #5E5B54;
  --sand-800: #3A3833;
  --sand-900: #161D1F;   /* v1 onSurface — warm near-black */

  /* --- Coral (accent / tertiary) — anchor #E8A598 (accent), #865046 (tert) */
  --coral-50:  #FDF4F1;
  --coral-100: #FBE7E0;   /* ~ v1 tertiaryFixed */
  --coral-200: #F6CEC2;
  --coral-300: #EFB4A4;
  --coral-400: #E8A598;   /* v1 accent ← anchor */
  --coral-500: #D5816F;
  --coral-600: #B5675A;
  --coral-700: #865046;   /* v1 tertiary */
  --coral-800: #693E36;
  --coral-900: #472A24;

  /* ======================================================================
     2. SEMANTIC ROLES  (every role maps to a ramp step)
     ====================================================================== */

  /* Brand */
  --primary:            var(--sage-600);
  --primary-hover:      var(--sage-700);
  --primary-pressed:    var(--sage-800);
  --on-primary:         #FFFFFF;
  --primary-container:  var(--sage-300);
  --on-primary-container: var(--sage-800);
  --primary-soft:       var(--sage-100);   /* tint wash / icon chips */

  --accent:             var(--coral-400);
  --accent-strong:      var(--coral-700);
  --on-accent:          #FFFFFF;
  --accent-container:   var(--coral-100);
  --on-accent-container: var(--coral-700);

  /* Backgrounds & surfaces (warm) */
  --bg:                 var(--sand-100);   /* page — bright, barely-warm white */
  --surface:            #FEFDFB;            /* default card — a hair off pure white */
  --surface-elevated:   #FFFFFF;           /* raised card / sheet / FAB */
  --surface-sunken:     var(--sand-200);   /* wells, inset fields, tracks */
  --surface-hover:      var(--sand-200);

  /* Text */
  --text-primary:       var(--sand-900);   /* #161D1F */
  --text-secondary:     #424845;           /* v1 onSurfaceVariant */
  --text-tertiary:      #727975;           /* v1 outline — captions, meta */
  --text-on-sage:       #FFFFFF;
  --text-disabled:      #A7A096;

  /* Borders / dividers */
  --border-subtle:      #F0EFEA;           /* hairline on bright cards */
  --border-default:     #DEDCD4;           /* --sand-400 */
  --border-strong:      #BAB7AE;           /* --sand-500 */
  --border-focus:       var(--sage-600);

  /* ======================================================================
     3. SEMANTIC STATE COLORS  (v1 only shipped error — added the rest, warm)
     ====================================================================== */
  --success:            #3F7D63;
  --on-success:         #FFFFFF;
  --success-container:  #D8EBDF;
  --on-success-container:#1C3B2C;

  --warning:            #B6803A;           /* warm amber, never neon */
  --on-warning:         #FFFFFF;
  --warning-container:  #F7E9CE;
  --on-warning-container:#553B17;

  --info:               #4A6D85;           /* muted slate-blue */
  --on-info:            #FFFFFF;
  --info-container:     #DDE8EF;
  --on-info-container:  #213442;

  --error:              #B3261E;           /* softened from v1 #BA1A1A */
  --on-error:           #FFFFFF;
  --error-container:    #F9DEDC;
  --on-error-container: #5C150F;

  /* ======================================================================
     4. DARK / LOW-LIGHT  (Camera + Comparison; warm charcoal, not black)
     ====================================================================== */
  --dark-bg:            #1A1C1B;           /* warm charcoal */
  --dark-surface:       #242826;
  --dark-surface-elevated: #2E332F;
  --dark-text-primary:  #ECF1ED;
  --dark-text-secondary:#A9B2AC;
  --dark-border:        #3A413C;
  --dark-primary:       var(--sage-300);   /* sage reads brighter on dark */
  --dark-on-primary:    var(--sage-900);

  /* ======================================================================
     5. SOFT GRADIENTS  (used with restraint — hero washes only)
     ====================================================================== */
  --grad-hero:   linear-gradient(180deg, var(--sand-50) 0%, var(--sage-100) 100%);
  --grad-splash: linear-gradient(170deg, #FFFFFF 0%, #FAFAF6 45%, #E9F1EB 100%);
  --grad-streak-glow: radial-gradient(circle at 50% 42%, rgba(168,197,184,0.55) 0%, rgba(252,251,249,0) 68%);
  --grad-sage:   linear-gradient(135deg, var(--sage-500) 0%, var(--sage-700) 100%);

  /* ======================================================================
     6. TYPE RAMP  (Assistant; +700 weight & display tier added in v2)
     Hebrew-tuned: generous line-height, right-aligned by default.
     ====================================================================== */
  --font-sans: 'Assistant', -apple-system, 'Segoe UI', sans-serif;

  --fs-display: 40px;  --lh-display: 46px;  --fw-display: 700; --ls-display: -0.4px;
  --fs-stat:    34px;  --lh-stat:    38px;  --fw-stat:    700; /* streaks/weeks — tabular */
  --fs-title-lg:28px;  --lh-title-lg:34px;  --fw-title-lg:700;
  --fs-title-md:22px;  --lh-title-md:28px;  --fw-title-md:600;
  --fs-title-sm:18px;  --lh-title-sm:24px;  --fw-title-sm:600;
  --fs-body-lg: 18px;  --lh-body-lg: 28px;  --fw-body-lg: 400; /* 1.55 */
  --fs-body-md: 16px;  --lh-body-md: 26px;  --fw-body-md: 400; /* 1.62 */
  --fs-label:   14px;  --lh-label:   20px;  --fw-label:   600; --ls-label: 0.2px;
  --fs-caption: 13px;  --lh-caption: 18px;  --fw-caption: 500;
  --fs-overline:12px;  --lh-overline:16px;  --fw-overline:600; --ls-overline: 0.6px;

  /* ======================================================================
     7. SPACING  (8pt base + 4pt sub-grid)
     ====================================================================== */
  --space-2:  2px;
  --space-4:  4px;    /* xs */
  --space-8:  8px;    /* sm */
  --space-12: 12px;   /* gutter */
  --space-16: 16px;   /* md */
  --space-20: 20px;   /* container margin */
  --space-24: 24px;   /* lg */
  --space-32: 32px;   /* xl */
  --space-40: 40px;
  --space-48: 48px;
  --container-margin: 20px;

  /* ======================================================================
     8. RADIUS
     ====================================================================== */
  --radius-sm:   8px;    /* chips, small controls */
  --radius-md:   12px;   /* inputs, list rows */
  --radius-lg:   16px;   /* stat cards, thumbnails */
  --radius-xl:   20px;   /* standard cards */
  --radius-2xl:  28px;   /* sheets, hero cards */
  --radius-pill: 9999px; /* buttons, FAB, toggles */

  /* ======================================================================
     9. ELEVATION  (5 levels, two-layer warm charcoal shadow #0E1B16)
     ====================================================================== */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(14,27,22,0.04), 0 1px 3px rgba(14,27,22,0.05);
  --elev-2: 0 2px 4px rgba(14,27,22,0.05), 0 6px 16px rgba(14,27,22,0.06);
  --elev-3: 0 4px 8px rgba(14,27,22,0.06), 0 12px 28px rgba(14,27,22,0.08);
  --elev-4: 0 8px 18px rgba(14,27,22,0.10), 0 20px 48px rgba(14,27,22,0.14);
  --shadow-sage: 0 8px 20px rgba(73,100,89,0.22);   /* tinted glow under primary CTA/FAB */

  /* ======================================================================
     10. MOTION  (Reanimated v3-ready)
     ====================================================================== */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-quick:      cubic-bezier(0.4, 0, 1, 1);
  --dur-quick:       150ms;
  --dur-standard:    250ms;
  --dur-emphasized:  400ms;
  /* spring preset (gestures/FAB): damping 18 · stiffness 180 · mass 1 */

  /* ======================================================================
     11. Z-INDEX
     ====================================================================== */
  --z-base: 0; --z-sticky: 10; --z-nav: 20; --z-fab: 30;
  --z-sheet: 40; --z-overlay: 45; --z-toast: 50; --z-modal: 60;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES  (apply directly to HTML in mocks)
   ============================================================================ */
html[dir="rtl"], [dir="rtl"] { direction: rtl; }

body.sj {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text-primary);
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

.sj-display  { font-size: var(--fs-display);  line-height: var(--lh-display);  font-weight: var(--fw-display);  letter-spacing: var(--ls-display); }
.sj-stat     { font-size: var(--fs-stat);     line-height: var(--lh-stat);     font-weight: var(--fw-stat); font-variant-numeric: tabular-nums; }
.sj-title-lg { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); font-weight: var(--fw-title-lg); }
.sj-title-md { font-size: var(--fs-title-md); line-height: var(--lh-title-md); font-weight: var(--fw-title-md); }
.sj-title-sm { font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); font-weight: var(--fw-title-sm); }
.sj-body-lg  { font-size: var(--fs-body-lg);  line-height: var(--lh-body-lg);  font-weight: var(--fw-body-lg); }
.sj-body-md  { font-size: var(--fs-body-md);  line-height: var(--lh-body-md);  font-weight: var(--fw-body-md); }
.sj-label    { font-size: var(--fs-label);    line-height: var(--lh-label);    font-weight: var(--fw-label); letter-spacing: var(--ls-label); }
.sj-caption  { font-size: var(--fs-caption);  line-height: var(--lh-caption);  font-weight: var(--fw-caption); color: var(--text-tertiary); }
.sj-overline { font-size: var(--fs-overline); line-height: var(--lh-overline); font-weight: var(--fw-overline); letter-spacing: var(--ls-overline); color: var(--text-secondary); }

/* numbers & dates stay LTR inside RTL lines */
.sj-num { direction: ltr; unicode-bidi: embed; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}