/* latin-ext */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/pjs-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/pjs-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/*
 * CLND — Design Tokens
 * Premium redesign direction: Plus Jakarta Sans, richer greens, warm surfaces
 * Based on: lib/core/theme/app_colors.dart + lib/core/theme/app_theme.dart
 */

/* ─────────────────────────────────────────
   COLOR TOKENS — BASE PALETTE
   ───────────────────────────────────────── */

:root {
  /* Primary — Forest Green (upgraded from #34A853) */
  --color-primary-50:  #E8F5E9;
  --color-primary-100: #C8E6C9;
  --color-primary-200: #A5D6A7;
  --color-primary-300: #81C784;
  --color-primary-400: #66BB6A;
  --color-primary-500: #34A853;   /* Brand primary */
  --color-primary-600: #2E9648;
  --color-primary-700: #237A38;
  --color-primary-800: #1B5E20;   /* Primary dark */
  --color-primary-900: #0D3D13;

  /* Neutrals — Warm grays */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAF8;   /* Premium warm background */
  --color-neutral-100: #F5F5F2;
  --color-neutral-200: #EEEEEA;
  --color-neutral-300: #E0E0DC;   /* Divider */
  --color-neutral-400: #BDBDBA;   /* Disabled */
  --color-neutral-500: #9E9E9A;
  --color-neutral-600: #757571;   /* Text secondary */
  --color-neutral-700: #424240;
  --color-neutral-800: #212120;   /* Text primary */
  --color-neutral-900: #121210;

  /* Dark mode surfaces */
  --color-dark-bg:      #0F1512;   /* Richer dark, slightly green-tinted */
  --color-dark-surface: #1A2320;
  --color-dark-card:    #243028;
  --color-dark-border:  #2E3C38;

  /* Semantic */
  --color-gold:    #F4A40A;        /* Medals */
  --color-error:   #E53935;        /* Strikes / errors */
  --color-warning: #F57C00;        /* Warning */
  --color-info:    #1565C0;        /* Info / blue accent */
  --color-purple:  #6A1B9A;        /* Confetti / decoration */

  /* Gamification — strike gradient */
  --color-strike-green:  #34A853;
  --color-strike-yellow: #FBBC04;
  --color-strike-red:    #EA4335;

  /* Punishment wheel */
  --color-wheel-1: #4CAF50;
  --color-wheel-2: #FF9800;
  --color-wheel-3: #9C27B0;
  --color-wheel-4: #2196F3;
  --color-wheel-5: #E91E63;
  --color-wheel-6: #00BCD4;
  --color-wheel-7: #FF5722;
}

/* ─────────────────────────────────────────
   COLOR TOKENS — SEMANTIC (LIGHT MODE)
   ───────────────────────────────────────── */

:root {
  --bg:              var(--color-neutral-50);   /* App background */
  --bg-elevated:     var(--color-neutral-0);    /* Cards, sheets */
  --bg-sunken:       var(--color-neutral-100);  /* Input backgrounds */
  --surface:         var(--color-neutral-0);
  --surface-tinted:  var(--color-primary-50);   /* Completed task bg */

  --fg-1:            var(--color-neutral-800);  /* Primary text */
  --fg-2:            var(--color-neutral-600);  /* Secondary text */
  --fg-3:            var(--color-neutral-400);  /* Disabled / placeholder */
  --fg-on-primary:   #FFFFFF;

  --border:          var(--color-neutral-300);
  --divider:         var(--color-neutral-200);

  --primary:         var(--color-primary-500);
  --primary-hover:   var(--color-primary-600);
  --primary-press:   var(--color-primary-700);
  --primary-subtle:  var(--color-primary-50);
  --primary-muted:   var(--color-primary-100);

  --error:           var(--color-error);
  --error-subtle:    #FFEBEE;
  --warning:         var(--color-warning);
  --warning-subtle:  #FFF3E0;
  --gold:            var(--color-gold);
  --gold-subtle:     #FFF8E1;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 4px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px 0 rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 24px 0 rgba(0,0,0,0.10), 0 4px 8px -4px rgba(0,0,0,0.06);
  --shadow-primary: 0 4px 16px 0 rgba(52,168,83,0.28);

  /* Border radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* Cards, buttons */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Spacing */
  --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;
  --space-16: 64px;
}

/* ─────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:              var(--color-dark-bg);
    --bg-elevated:     var(--color-dark-surface);
    --bg-sunken:       var(--color-dark-bg);
    --surface:         var(--color-dark-surface);
    --surface-tinted:  rgba(52,168,83,0.12);

    --fg-1:            #EEF2EF;
    --fg-2:            #9AB0A8;
    --fg-3:            #4A6058;
    --fg-on-primary:   #FFFFFF;

    --border:          var(--color-dark-border);
    --divider:         var(--color-dark-border);

    --primary:         #4ECB6E;           /* Slightly lighter in dark */
    --primary-hover:   #5FD87F;
    --primary-press:   var(--color-primary-500);
    --primary-subtle:  rgba(52,168,83,0.15);
    --primary-muted:   rgba(52,168,83,0.08);

    --error-subtle:    rgba(229,57,53,0.15);
    --warning-subtle:  rgba(245,124,0,0.15);
    --gold-subtle:     rgba(244,164,10,0.15);

    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 4px 0 rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px 0 rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px 0 rgba(0,0,0,0.5);
    --shadow-primary: 0 4px 16px 0 rgba(78,203,110,0.2);
  }
}

/* ─────────────────────────────────────────
   TYPOGRAPHY — BASE
   Note: Plus Jakarta Sans substitutes for system default (Roboto/SF Pro)
   ───────────────────────────────────────── */

:root {
  --font-sans:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Weight scale */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Type scale — mirrors Flutter Material 3 TextTheme */
  /* displayLarge  */ --text-display-lg-size: 57px; --text-display-lg-lh: 64px; --text-display-lg-weight: var(--weight-extrabold);
  /* displayMedium */ --text-display-md-size: 45px; --text-display-md-lh: 52px; --text-display-md-weight: var(--weight-bold);
  /* displaySmall  */ --text-display-sm-size: 36px; --text-display-sm-lh: 44px; --text-display-sm-weight: var(--weight-bold);
  /* headlineLarge */ --text-headline-lg-size: 32px; --text-headline-lg-lh: 40px; --text-headline-lg-weight: var(--weight-bold);
  /* headlineMedium*/ --text-headline-md-size: 28px; --text-headline-md-lh: 36px; --text-headline-md-weight: var(--weight-semibold);
  /* headlineSmall */ --text-headline-sm-size: 24px; --text-headline-sm-lh: 32px; --text-headline-sm-weight: var(--weight-semibold);
  /* titleLarge    */ --text-title-lg-size: 22px;    --text-title-lg-lh: 28px;    --text-title-lg-weight: var(--weight-semibold);
  /* titleMedium   */ --text-title-md-size: 16px;    --text-title-md-lh: 24px;    --text-title-md-weight: var(--weight-semibold);
  /* titleSmall    */ --text-title-sm-size: 14px;    --text-title-sm-lh: 20px;    --text-title-sm-weight: var(--weight-medium);
  /* bodyLarge     */ --text-body-lg-size: 16px;     --text-body-lg-lh: 24px;     --text-body-lg-weight: var(--weight-regular);
  /* bodyMedium    */ --text-body-md-size: 14px;     --text-body-md-lh: 20px;     --text-body-md-weight: var(--weight-regular);
  /* bodySmall     */ --text-body-sm-size: 12px;     --text-body-sm-lh: 16px;     --text-body-sm-weight: var(--weight-regular);
  /* labelLarge    */ --text-label-lg-size: 14px;    --text-label-lg-lh: 20px;    --text-label-lg-weight: var(--weight-medium);
  /* labelMedium   */ --text-label-md-size: 12px;    --text-label-md-lh: 16px;    --text-label-md-weight: var(--weight-medium);
  /* labelSmall    */ --text-label-sm-size: 11px;    --text-label-sm-lh: 16px;    --text-label-sm-weight: var(--weight-medium);
}

/* ─────────────────────────────────────────
   SEMANTIC TEXT CLASSES
   ───────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: var(--text-headline-lg-size); line-height: var(--text-headline-lg-lh); font-weight: var(--text-headline-lg-weight); }
h2 { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-lh); font-weight: var(--text-headline-md-weight); }
h3 { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-lh); font-weight: var(--text-headline-sm-weight); }
h4 { font-size: var(--text-title-lg-size);    line-height: var(--text-title-lg-lh);    font-weight: var(--text-title-lg-weight); }
h5 { font-size: var(--text-title-md-size);    line-height: var(--text-title-md-lh);    font-weight: var(--text-title-md-weight); }
h6 { font-size: var(--text-title-sm-size);    line-height: var(--text-title-sm-lh);    font-weight: var(--text-title-sm-weight); }
p  { font-size: var(--text-body-md-size);     line-height: var(--text-body-md-lh);     font-weight: var(--text-body-md-weight); }

.text-display-lg { font-size: var(--text-display-lg-size);   line-height: var(--text-display-lg-lh);   font-weight: var(--text-display-lg-weight); }
.text-display-md { font-size: var(--text-display-md-size);   line-height: var(--text-display-md-lh);   font-weight: var(--text-display-md-weight); }
.text-display-sm { font-size: var(--text-display-sm-size);   line-height: var(--text-display-sm-lh);   font-weight: var(--text-display-sm-weight); }
.text-headline-lg { font-size: var(--text-headline-lg-size); line-height: var(--text-headline-lg-lh); font-weight: var(--text-headline-lg-weight); }
.text-headline-md { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-lh); font-weight: var(--text-headline-md-weight); }
.text-headline-sm { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-lh); font-weight: var(--text-headline-sm-weight); }
.text-title-lg  { font-size: var(--text-title-lg-size);  line-height: var(--text-title-lg-lh);  font-weight: var(--text-title-lg-weight); }
.text-title-md  { font-size: var(--text-title-md-size);  line-height: var(--text-title-md-lh);  font-weight: var(--text-title-md-weight); }
.text-title-sm  { font-size: var(--text-title-sm-size);  line-height: var(--text-title-sm-lh);  font-weight: var(--text-title-sm-weight); }
.text-body-lg   { font-size: var(--text-body-lg-size);   line-height: var(--text-body-lg-lh);   font-weight: var(--text-body-lg-weight); }
.text-body-md   { font-size: var(--text-body-md-size);   line-height: var(--text-body-md-lh);   font-weight: var(--text-body-md-weight); }
.text-body-sm   { font-size: var(--text-body-sm-size);   line-height: var(--text-body-sm-lh);   font-weight: var(--text-body-sm-weight); }
.text-label-lg  { font-size: var(--text-label-lg-size);  line-height: var(--text-label-lg-lh);  font-weight: var(--text-label-lg-weight); }
.text-label-md  { font-size: var(--text-label-md-size);  line-height: var(--text-label-md-lh);  font-weight: var(--text-label-md-weight); }
.text-label-sm  { font-size: var(--text-label-sm-size);  line-height: var(--text-label-sm-lh);  font-weight: var(--text-label-sm-weight); }

.text-fg1 { color: var(--fg-1); }
.text-fg2 { color: var(--fg-2); }
.text-fg3 { color: var(--fg-3); }
.text-primary { color: var(--primary); }
.text-error   { color: var(--error); }
.text-warning { color: var(--warning); }
.text-gold    { color: var(--gold); }