/* themes/Grantha/storefront/src/css/tokens/_tokens.css */
:root {
  --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;
  --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);
  --g-positive: #16a34a;
  --g-positive-tint: rgba(22, 163, 74, 0.12);
  --g-info: #2563eb;
  --g-danger: #dc2626;
  --g-danger-text: #b91c1c;
  --g-danger-tint: rgba(220, 38, 38, 0.09);
  --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;
  --g-card: var(--g-surface);
  --g-accent-soft: var(--g-accent-tint);
  --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] {
  --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-danger: #ef4444;
  --g-danger-text: #fca5a5;
  --g-danger-tint: rgba(239, 68, 68, 0.16);
  --g-positive: #4ade80;
  --g-positive-tint: rgba(74, 222, 128, 0.16);
  --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);
}

/* themes/Grantha/storefront/src/css/nocturne-tokens.css */