/* ===========================================================
   Repetir Design System — Colors & Type
   Source of truth: repetir_next/app/globals.css + DESIGN_UPDATE.md
   Vibe: warm + playful + gamified (Duolingo-ish), signature
   indigo + coral paired with cream backgrounds and handwritten
   script accents. Used across web + PWA + Android TWA.
   =========================================================== */

/* ---------- Fonts (web + local) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Dancing+Script:wght@500;600;700&family=Kalam:wght@400;700&family=JetBrains+Mono:wght@400;600&display=swap");

@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (signature) ---------- */
  --brand-indigo:       #6366f1;  /* Primary, signature */
  --brand-indigo-600:   #5b5ff9;  /* Hover / saturated */
  --brand-indigo-300:   #818cf8;  /* Dark mode primary */
  --brand-coral:        #ff9f43;  /* Warm accent */
  --brand-coral-600:    #ff9635;
  --brand-peach:        #ffe89a;  /* Secondary fill */
  --brand-cream:        #fefbf6;  /* Canvas */
  --brand-cream-alt:    #fef9f3;

  /* Gamification (Duolingo-like) */
  --game-green:         #58cc02;  /* Success / streak */
  --game-yellow:        #ffa502;  /* Warning / XP */
  --game-blue:          #4b7bec;  /* Info / translate */
  --game-red:           #ff6b6b;  /* Destructive / hearts */
  --game-pink:          #ee5a6f;  /* Chart 5 */

  /* ---------- Semantic — LIGHT ---------- */
  --background:           #fefbf6;
  --foreground:           #2d2d2d;
  --card:                 #ffffff;
  --card-foreground:      #2d2d2d;
  --popover:              #ffffff;
  --popover-foreground:   #2d2d2d;

  --primary:              #5b5ff9;
  --primary-foreground:   #ffffff;
  --secondary:            #ffe89a;
  --secondary-foreground: #2d2d2d;
  --muted:                #fff2e0;
  --muted-foreground:     #7a6b50;
  --accent:               #ff9635;
  --accent-foreground:    #ffffff;

  --success:              #58cc02;
  --success-foreground:   #ffffff;
  --warning:              #ffa502;
  --warning-foreground:   #ffffff;
  --info:                 #4b7bec;
  --info-foreground:      #ffffff;
  --destructive:          #ff6b6b;
  --destructive-foreground: #ffffff;

  --border:  #e8d9c4;
  --input:   #e0d0b8;
  --ring:    #5b5ff9;

  /* Chart palette */
  --chart-1: #6366f1;
  --chart-2: #ff9f43;
  --chart-3: #4b7bec;
  --chart-4: #ffa502;
  --chart-5: #ee5a6f;

  /* Sidebar */
  --sidebar:                     #fffbf5;
  --sidebar-foreground:          #3c3c3c;
  --sidebar-primary:             #6366f1;
  --sidebar-primary-foreground:  #ffffff;
  --sidebar-accent:              #fff4e6;
  --sidebar-accent-foreground:   #3c3c3c;
  --sidebar-border:              #f0e6d7;
  --sidebar-ring:                #6366f1;

  /* ---------- Type scale ---------- */
  --font-sans:      "Nunito", "Geist", system-ui, sans-serif;
  --font-display:   "Nunito", "Geist", system-ui, sans-serif;
  --font-script:    "Dancing Script", cursive;       /* wordmark */
  --font-hand:      "Kalam", "Caveat", cursive;       /* exercise text */
  --font-mono:      "JetBrains Mono", ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* ---------- Shape ---------- */
  --radius-xs: 0.5rem;
  --radius-sm: 0.75rem;
  --radius:    1rem;       /* default (rounded, friendly) */
  --radius-md: 1.25rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;       /* cards */
  --radius-full: 9999px;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Shadow (warm, tinted amber) ---------- */
  --shadow-2xs: 0 4px 8px -1px hsl(30 40% 50% / 0.05);
  --shadow-xs:  0 4px 8px -1px hsl(30 40% 50% / 0.08);
  --shadow-sm:  0 4px 12px -2px hsl(30 40% 50% / 0.12), 0 2px 4px -2px hsl(30 40% 50% / 0.08);
  --shadow:     0 4px 12px -2px hsl(30 40% 50% / 0.15), 0 2px 4px -2px hsl(30 40% 50% / 0.10);
  --shadow-md:  0 6px 16px -2px hsl(30 40% 50% / 0.18), 0 3px 6px -2px hsl(30 40% 50% / 0.12);
  --shadow-lg:  0 10px 24px -3px hsl(30 40% 50% / 0.20), 0 4px 8px -2px hsl(30 40% 50% / 0.15);
  --shadow-xl:  0 16px 32px -4px hsl(30 40% 50% / 0.25), 0 6px 12px -3px hsl(30 40% 50% / 0.18);
  --shadow-glow-primary: 0 0 24px hsl(243 77% 67% / 0.35);
  --shadow-glow-accent:  0 0 24px hsl(27 100% 60% / 0.35);

  /* Duolingo-style "3D" push button — a flat bottom shadow */
  --shadow-push-primary: 0 4px 0 0 #3f43d9;
  --shadow-push-success: 0 4px 0 0 #46a802;
  --shadow-push-warning: 0 4px 0 0 #cc8400;
  --shadow-push-muted:   0 4px 0 0 #d9c9a8;

  /* ---------- Motion ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-back:   cubic-bezier(0.68, -0.55, 0.265, 1.55); /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:    150ms; /* @kind other */
  --dur:         250ms; /* @kind other */
  --dur-slow:    400ms; /* @kind other */

  /* ---------- Brand gradient ---------- */
  --gradient-wordmark: linear-gradient(90deg, #6366f1 0%, #ff9f43 50%, #6366f1 100%); /* @kind color */
  --gradient-hero:     linear-gradient(135deg, #6366f1 0%, #ff9f43 100%); /* @kind color */
}

.dark {
  --background:          #1a1a2e;
  --foreground:          #eee5e9;
  --card:                #252540;
  --card-foreground:     #eee5e9;
  --popover:             #252540;
  --popover-foreground:  #eee5e9;

  --primary:              #818cf8;
  --primary-foreground:   #1a1a2e;
  --secondary:            #4a4a68;
  --secondary-foreground: #eee5e9;
  --muted:                #2d2d44;
  --muted-foreground:     #b8a896;
  --accent:               #ff9f43;
  --accent-foreground:    #1a1a2e;

  --border: #3d3d5c;
  --input:  #4a4a68;
  --ring:   #818cf8;

  --shadow:     0 4px 12px -2px hsl(0 0% 0% / 0.35), 0 2px 4px -2px hsl(0 0% 0% / 0.25);
  --shadow-lg:  0 10px 24px -3px hsl(0 0% 0% / 0.45), 0 4px 8px -2px hsl(0 0% 0% / 0.35);
}

/* ---------- Semantic type classes ---------- */
.ds-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}
.ds-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.ds-lead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.ds-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.ds-script {
  font-family: var(--font-script);
  font-weight: 700;
}
.ds-hand {
  font-family: var(--font-hand);
  font-weight: 400;
}

/* Signature wordmark gradient */
.ds-wordmark {
  font-family: var(--font-script);
  font-weight: 700;
  background: var(--gradient-wordmark);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}