/* ==========================================================================
   Dil Punjab — Design Tokens
   Single source of truth for colour, type, spacing, radius, elevation, motion.
   Mirror these names in Flutter (ThemeData / ThemeExtension) and the admin panel.
   Contrast notes are WCAG 2.2 ratios against the paired surface.
   ========================================================================== */

:root {
  /* ---- Brand primitives (sampled from logo) ---------------------------- */
  --rose-50:  #FFF0F5;
  --rose-100: #FFDCE8;
  --rose-200: #FFB8D0;
  --rose-300: #FF8AB0;
  --rose-400: #FF5C93;   /* rose text on dark: 6.7:1 */
  --rose-500: #F2247A;
  --rose-600: #E0005C;   /* BRAND ROSE — white text 4.86:1 */
  --rose-700: #C8004F;   /* hover / rose text on light 5.9:1 */
  --rose-800: #99003C;
  --rose-900: #5E0025;

  --navy-50:  #EEF2FB;
  --navy-100: #D9E2F6;
  --navy-200: #B3C3EC;
  --navy-300: #8FA6E8;   /* navy text on dark 8.2:1 */
  --navy-400: #5674C6;
  --navy-500: #2B4DA6;
  --navy-600: #173A8E;
  --navy-700: #0A2A78;   /* BRAND NAVY — white text 13:1 */
  --navy-800: #071E58;
  --navy-900: #041338;
  --navy-950: #020A1F;

  /* Accent: saffron / mustard-field gold. Use sparingly (Vibes, celebration). */
  --saffron-300: #FFD866;
  --saffron-400: #F5C125;
  --saffron-500: #F2B807;  /* on ink-900: 10:1 — never as text on white */
  --saffron-700: #8A6400;

  /* Warm neutrals */
  --ink-0:   #FFFFFF;
  --ink-25:  #FCFBFC;
  --ink-50:  #F6F4F7;
  --ink-100: #EDEAF0;
  --ink-200: #DDD8E2;
  --ink-300: #C1BAC9;
  --ink-400: #8E879A;   /* disabled / decorative only (3.45:1) */
  --ink-500: #6B6478;   /* muted text 5.65:1 on white */
  --ink-600: #514B5E;
  --ink-700: #3B3647;
  --ink-800: #26222F;
  --ink-850: #1E1A26;
  --ink-900: #18141F;
  --ink-950: #0E0B14;

  /* Status primitives */
  --green-600: #0B7A53;  --green-50: #E8F6F0;  --green-300: #3DD68C;
  --red-600:   #C62828;  --red-50:   #FDECEC;  --red-300:   #FF8A8A;
  --amber-600: #B45309;  --amber-50: #FEF3E2;  --amber-300: #F5B544;
  --blue-600:  #2B4DA6;  --blue-50:  #EEF2FB;  --blue-300:  #8FA6E8;

  /* Feature tints (Connections hub) */
  --tint-viewed:  #EEF2FB;
  --tint-liked:   #FFF0F5;
  --tint-matches: #E8F6F0;

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "DM Serif Display", "Noto Serif Gurmukhi", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Noto Sans Gurmukhi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.75rem;   /* 12 — captions, counters */
  --text-sm:   0.875rem;  /* 14 — secondary, labels */
  --text-md:   1rem;      /* 16 — body, inputs (prevents iOS zoom) */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 — screen titles */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  clamp(2.5rem, 6vw, 4.5rem); /* editorial hero */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.55;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---- Spacing (4pt grid) --------------------------------------------- */
  --space-0: 0;
  --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;
  --space-20: 80px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;   /* inputs, buttons */
  --radius-lg: 20px;   /* cards */
  --radius-xl: 28px;   /* sheets, profile card */
  --radius-pill: 999px;

  /* ---- Sizing ---------------------------------------------------------- */
  --tap-min: 44px;        /* minimum touch target */
  --control-h: 52px;      /* inputs and primary buttons */
  --control-h-sm: 40px;
  --content-max: 1200px;
  --app-max: 440px;       /* mobile-first app column */

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Semantic: LIGHT (default for the app) --------------------------- */
  color-scheme: light;
  --bg:            var(--ink-25);
  --bg-elevated:   var(--ink-0);
  --surface:       var(--ink-0);
  --surface-2:     var(--ink-50);
  --surface-3:     var(--ink-100);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-600);
  --text-disabled: var(--ink-400);

  --primary:          var(--rose-600);
  --primary-hover:    var(--rose-700);
  --primary-pressed:  var(--rose-800);
  --primary-soft:     var(--rose-50);
  --primary-soft-2:   var(--rose-100);
  --on-primary:       #FFFFFF;
  --primary-text:     var(--rose-700);   /* rose used as text */

  --secondary:        var(--navy-700);
  --secondary-hover:  var(--navy-800);
  --secondary-soft:   var(--navy-50);
  --on-secondary:     #FFFFFF;
  --secondary-text:   var(--navy-700);

  --accent:           var(--saffron-500);
  --on-accent:        var(--ink-950);

  --success: var(--green-600); --success-soft: var(--green-50);
  --danger:  var(--red-600);   --danger-soft:  var(--red-50);
  --warning: var(--amber-600); --warning-soft: var(--amber-50);
  --info:    var(--blue-600);  --info-soft:    var(--blue-50);

  --focus-ring: 0 0 0 3px var(--bg-elevated), 0 0 0 5px var(--navy-500);
  --overlay: rgba(14, 11, 20, .55);

  --shadow-xs: 0 1px 2px rgba(23, 20, 31, .06);
  --shadow-sm: 0 2px 8px rgba(23, 20, 31, .06), 0 1px 2px rgba(23, 20, 31, .04);
  --shadow-md: 0 8px 24px rgba(23, 20, 31, .08), 0 2px 6px rgba(23, 20, 31, .05);
  --shadow-lg: 0 20px 48px rgba(23, 20, 31, .14), 0 4px 12px rgba(23, 20, 31, .06);
  --shadow-primary: 0 10px 28px rgba(224, 0, 92, .28);

  --gradient-brand: linear-gradient(135deg, var(--rose-600) 0%, var(--rose-500) 55%, #F0468C 100%);
  --gradient-gesture: linear-gradient(135deg, var(--rose-600) 0%, var(--navy-600) 100%);
  --gradient-glow: radial-gradient(60% 50% at 50% 0%, rgba(224, 0, 92, .28) 0%, rgba(224, 0, 92, 0) 70%);
}

/* ---- Semantic: DARK -------------------------------------------------- */
/* Used by the marketing hero, camera, gesture modals, and as a user theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            var(--ink-950);
    --bg-elevated:   var(--ink-900);
    --surface:       var(--ink-900);
    --surface-2:     var(--ink-850);
    --surface-3:     var(--ink-800);
    --border:        #2E2939;
    --border-strong: #433D51;
    --text:          #F5F1F7;
    --text-muted:    #A39CB0;
    --text-subtle:   #C4BECF;
    --text-disabled: #6B6478;
    --primary-soft:  rgba(255, 92, 147, .12);
    --primary-soft-2:rgba(255, 92, 147, .2);
    --primary-text:  var(--rose-400);
    --secondary:     var(--navy-300);
    --secondary-hover: var(--navy-200);
    --secondary-soft:rgba(143, 166, 232, .12);
    --on-secondary:  var(--ink-950);
    --secondary-text:var(--navy-300);
    --success: var(--green-300); --success-soft: rgba(61, 214, 140, .12);
    --danger:  var(--red-300);   --danger-soft:  rgba(255, 138, 138, .12);
    --warning: var(--amber-300); --warning-soft: rgba(245, 181, 68, .12);
    --info:    var(--blue-300);  --info-soft:    rgba(143, 166, 232, .12);
    --tint-viewed:  rgba(143, 166, 232, .1);
    --tint-liked:   rgba(255, 92, 147, .1);
    --tint-matches: rgba(61, 214, 140, .1);
    --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--navy-300);
    --overlay: rgba(2, 1, 6, .7);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            var(--ink-950);
  --bg-elevated:   var(--ink-900);
  --surface:       var(--ink-900);
  --surface-2:     var(--ink-850);
  --surface-3:     var(--ink-800);
  --border:        #2E2939;
  --border-strong: #433D51;
  --text:          #F5F1F7;
  --text-muted:    #A39CB0;
  --text-subtle:   #C4BECF;
  --text-disabled: #6B6478;
  --primary-soft:  rgba(255, 92, 147, .12);
  --primary-soft-2:rgba(255, 92, 147, .2);
  --primary-text:  var(--rose-400);
  --secondary:     var(--navy-300);
  --secondary-hover: var(--navy-200);
  --secondary-soft:rgba(143, 166, 232, .12);
  --on-secondary:  var(--ink-950);
  --secondary-text:var(--navy-300);
  --success: var(--green-300); --success-soft: rgba(61, 214, 140, .12);
  --danger:  var(--red-300);   --danger-soft:  rgba(255, 138, 138, .12);
  --warning: var(--amber-300); --warning-soft: rgba(245, 181, 68, .12);
  --info:    var(--blue-300);  --info-soft:    rgba(143, 166, 232, .12);
  --tint-viewed:  rgba(143, 166, 232, .1);
  --tint-liked:   rgba(255, 92, 147, .1);
  --tint-matches: rgba(61, 214, 140, .1);
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--navy-300);
  --overlay: rgba(2, 1, 6, .7);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
}

/* Force-dark scope for surfaces that are always dark (hero, camera, gesture modal). */
.theme-dark {
  color-scheme: dark;
  --bg: var(--ink-950); --bg-elevated: var(--ink-900);
  --surface: var(--ink-900); --surface-2: var(--ink-850); --surface-3: var(--ink-800);
  --border: #2E2939; --border-strong: #433D51;
  --text: #F5F1F7; --text-muted: #A39CB0; --text-subtle: #C4BECF; --text-disabled: #6B6478;
  --primary-soft: rgba(255, 92, 147, .12); --primary-text: var(--rose-400);
  --secondary: var(--navy-300); --on-secondary: var(--ink-950); --secondary-text: var(--navy-300);
  --secondary-soft: rgba(143, 166, 232, .12);
  --focus-ring: 0 0 0 3px var(--ink-950), 0 0 0 5px var(--navy-300);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}