/* Nocturne Design System Tokens — Dual Theme (Light & Dark) for Grantha.lk */

:root {
  /* Light Theme Palette (Default) */
  --g-bg: #f7f7f8;
  --g-surface: #fdfdfd;
  --g-surface-elevated: #ffffff;
  --g-text: #26262a;
  --g-soft: #3d3d43;
  --g-soft2: #4b4b53;
  --g-muted2: #5a5a63;
  --g-muted: #78787f;
  --g-faint: #9a9aa2;
  
  --g-line: rgba(38, 38, 42, 0.14);
  --g-line-2: rgba(38, 38, 42, 0.10);
  --g-line-3: rgba(38, 38, 42, 0.08);
  --g-line-strong: rgba(38, 38, 42, 0.20);
  --g-line-strong2: rgba(38, 38, 42, 0.35);
  
  --g-hover: rgba(38, 38, 42, 0.04);
  --g-hover-strong: rgba(38, 38, 42, 0.07);
  
  --g-accent: #796cbf;
  /*
   * Hover fill for solid accent buttons. storefront.css and nocturne-checkout.css
   * have referenced this token since the checkout pass, but it was never defined:
   * an invalid var() makes the property `unset`, so `background: var(--g-accent-hover)`
   * resolved to transparent and every .action.primary.checkout vanished on hover.
   * Goes darker in light mode, deeper in dark, so white label text stays legible.
   */
  --g-accent-hover: #5d5294;
  --g-accent-text: #5d5294;
  --g-accent-tint: rgba(121, 108, 191, 0.12);
  --g-accent-tint-strong: rgba(121, 108, 191, 0.22);
  --g-accent-line: rgba(121, 108, 191, 0.45);
  
  /*
   * Semantic accents. The design system had none, so the payment-tier panel on the product
   * page hardcoded a green and a blue and stayed light-mode-only. Text colours, meant to sit
   * on --g-bg; the dark values are lifted so they hold contrast on the dark panel.
   */
  --g-positive: #16a34a;
  --g-info: #2563eb;

  --g-badge-bg: #e7e5fe;
  --g-badge-text: #423a6a;
  --g-veil: rgba(253, 253, 253, 0.92);
  --g-header-bg: rgba(247, 247, 248, 0.96);
  --g-cover-bg: #ececee;
  --g-logo-plate: transparent;
  --g-scroll-thumb: #cdcdd2;
  --g-scroll-track: #ececee;

  /*
   * Aliases for names the checkout and storefront stylesheets were already using without
   * anyone ever defining them. An invalid var() with no fallback makes the whole
   * declaration `unset`, so `background: var(--g-card)` painted nothing at all and the
   * focus rings never drew — the same failure as the --g-accent-hover note above, and as
   * the --g-bg-card fallback that kept the product page's payment panel light in dark mode.
   *
   * Defined once, here: both point at tokens that the dark palette below redefines on this
   * same element, so they resolve per theme without needing a second declaration.
   *
   *   --g-card        panel and card surfaces in checkout (16 uses)
   *   --g-accent-soft soft accent wash: focus rings, the active step halo, selected rows
   */
  --g-card: var(--g-surface);
  --g-accent-soft: var(--g-accent-tint);

  /* Nocturne Shared Ramp Tokens */
  --color-bg: var(--g-bg);
  --color-surface: var(--g-surface);
  --color-text: var(--g-text);
  --color-accent: var(--g-accent);
  --color-divider: color-mix(in srgb, var(--g-text) 16%, transparent);
  
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --font-heading: "Inter", "Noto Sans Sinhala", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", "Noto Sans Sinhala", system-ui, -apple-system, sans-serif;

  --space-1: 3px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 44px;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --shadow-sm: 0 0 0 1px rgba(38, 38, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 0 0 1px rgba(38, 38, 42, 0.10), 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 0 0 1px rgba(38, 38, 42, 0.12), 0 12px 32px rgba(0, 0, 0, 0.08);

  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

html[data-theme="dark"] {
  /* Dark Theme Palette */
  --g-bg: #161826;
  --g-surface: #232532;
  --g-surface-elevated: #2c2e3d;
  --g-text: #e9e9ed;
  --g-soft: #cfd3e5;
  --g-soft2: #b2b6ca;
  --g-muted2: #9397ab;
  --g-muted: #75798c;
  --g-faint: #595d6c;

  --g-line: rgba(233, 233, 237, 0.10);
  --g-line-2: rgba(233, 233, 237, 0.08);
  --g-line-3: rgba(233, 233, 237, 0.06);
  --g-line-strong: rgba(233, 233, 237, 0.16);
  --g-line-strong2: rgba(233, 233, 237, 0.28);

  --g-hover: rgba(233, 233, 237, 0.04);
  --g-hover-strong: rgba(233, 233, 237, 0.07);

  --g-accent: #9184d9;
  --g-accent-hover: #7d6fce;
  --g-accent-text: #d2cefd;
  --g-accent-tint: rgba(145, 132, 217, 0.12);
  --g-accent-tint-strong: rgba(145, 132, 217, 0.24);
  --g-accent-line: rgba(145, 132, 217, 0.45);

  --g-positive: #4ade80;
  --g-info: #7dabff;

  --g-badge-bg: #423a6a;
  --g-badge-text: #f5f4ff;
  --g-veil: rgba(22, 24, 38, 0.86);
  --g-header-bg: rgba(22, 24, 38, 0.96);
  --g-cover-bg: #1c1e2b;
  --g-logo-plate: #e4e7f5;
  --g-scroll-thumb: #3f424d;
  --g-scroll-track: #1c1e2b;

  --color-bg: var(--g-bg);
  --color-surface: var(--g-surface);
  --color-text: var(--g-text);
  --color-accent: var(--g-accent);
  --color-divider: color-mix(in srgb, var(--g-text) 16%, transparent);

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);
}