/* ============================================================
   Clavisco DS v2 — Tokens (drop-in, replaces tokens-morning-horizon.css)
   Modern enterprise refresh on top of SAP Horizon bones.
   3 brand palettes via [data-palette]. Light + dark via [data-theme].
   ============================================================ */

@font-face {
  font-family: '72';
  src: url("/assets/sap72/72-Regular-8c7e8752.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: '72';
  src: url("/assets/sap72/72-Bold-e3baba22.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Primitives ── */
  --c-white: #ffffff;
  --c-black: #000000;

  /* ── Neutral ramp (cool gray, used by all palettes) ── */
  --n-0:  #ffffff;
  --n-25: #fafbfc;
  --n-50: #f5f6f8;
  --n-100: #eef0f3;
  --n-150: #e4e7ec;
  --n-200: #d7dbe1;
  --n-300: #b9bfc8;
  --n-400: #8b939f;
  --n-500: #636b78;
  --n-600: #444b56;
  --n-700: #2d333d;
  --n-800: #1c2128;
  --n-900: #0f1216;
  --n-950: #08090c;

  /* ── Type scale (tighter, pro density) ── */
  --sap-font-family: '72', '72full', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --sap-font-numeric: '72', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-micro: 10.5px;
  --fs-label: 11px;
  --fs-small: 12px;
  --fs-body:  13px;
  --fs-subtitle: 14px;
  --fs-title: 15px;
  --fs-h2:    18px;
  --fs-h1:    22px;
  --fs-kpi:   28px;
  --fs-display: 36px;

  --lh-tight: 1.2;
  --lh-body:  1.45;

  /* ── Spacing ── */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 48px;

  /* ── Radii ── */
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;   /* general */
  --radius-4: 10px;  /* card */
  --radius-pill: 999px;

  /* ── Shadows (very subtle — Linear-tier) ── */
  --shadow-1: 0 1px 0 0 rgba(15,18,22,0.04), 0 1px 2px 0 rgba(15,18,22,0.04);
  --shadow-2: 0 1px 2px 0 rgba(15,18,22,0.06), 0 4px 12px -4px rgba(15,18,22,0.08);
  --shadow-3: 0 4px 12px -2px rgba(15,18,22,0.10), 0 12px 32px -8px rgba(15,18,22,0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent-500) 30%, transparent);

  /* ── Heights ── */
  --h-shell: 44px;
  --h-row: 32px;
  --h-control: 28px;
  --h-button: 30px;
  --h-button-lg: 34px;

  /* ── Motion ── */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 180ms cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   PALETTE 1 — Indigo (default, refined Clavisco)
   ============================================================ */
/* Default palette = royal. Override with [data-palette="indigo"|"slate"]. */
:root,
[data-palette="royal"] {
  /* Deeper SAP-blue evolution — closest to current Clavisco brand */
  --accent-50:  #e9f0fc;
  --accent-100: #cfdef9;
  --accent-200: #9ebcf2;
  --accent-300: #6c97e9;
  --accent-400: #3f73db;
  --accent-500: #2257c4;   /* primary */
  --accent-600: #1a47a3;
  --accent-700: #143882;
  --accent-800: #0f2c66;
}

[data-palette="indigo"] {
  --accent-50:  #eef1ff;
  --accent-100: #dde3ff;
  --accent-200: #bcc8ff;
  --accent-300: #92a3ff;
  --accent-400: #6577f5;
  --accent-500: #4756e0;
  --accent-600: #3a44b8;
  --accent-700: #2f378f;
  --accent-800: #262d72;
}

[data-palette="slate"] {
  /* Linear-style cool slate w/ a subtle teal lift */
  --accent-50:  #eef3f6;
  --accent-100: #d8e2ea;
  --accent-200: #b3c5d3;
  --accent-300: #84a0b6;
  --accent-400: #547d97;
  --accent-500: #345d78;   /* primary */
  --accent-600: #284a61;
  --accent-700: #1f3a4d;
  --accent-800: #182d3c;
}

/* Scoped palette previews for swatch cards on the showcase
   (so each palette card can show its OWN colors regardless of
   what the active page-level palette is) */
.ds-palette-card[data-palette="indigo"] {
  --accent-300: #92a3ff; --accent-400: #6577f5; --accent-500: #4756e0;
  --accent-600: #3a44b8; --accent-700: #2f378f;
}
.ds-palette-card[data-palette="slate"] {
  --accent-300: #84a0b6; --accent-400: #547d97; --accent-500: #345d78;
  --accent-600: #284a61; --accent-700: #1f3a4d;
}
.ds-palette-card[data-palette="royal"] {
  --accent-300: #6c97e9; --accent-400: #3f73db; --accent-500: #2257c4;
  --accent-600: #1a47a3; --accent-700: #143882;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg-app:     var(--n-50);
  --bg-canvas:  var(--n-0);
  --bg-muted:   var(--n-100);
  --bg-subtle:  var(--n-25);
  --bg-shell:   var(--n-0);
  --bg-overlay: rgba(15,18,22,0.45);

  /* Text */
  --fg-1:       var(--n-900);   /* primary */
  --fg-2:       var(--n-700);   /* secondary */
  --fg-3:       var(--n-500);   /* tertiary / labels */
  --fg-4:       var(--n-400);   /* hints / placeholders */
  --fg-on-accent: #ffffff;

  /* Borders */
  --border-1:   var(--n-150);   /* default */
  --border-2:   var(--n-200);   /* stronger */
  --border-3:   var(--n-300);

  /* States */
  --bg-hover:   color-mix(in srgb, var(--n-900) 4%, transparent);
  --bg-press:   color-mix(in srgb, var(--n-900) 7%, transparent);
  --bg-selected: color-mix(in srgb, var(--accent-500) 10%, transparent);
  --bg-selected-strong: color-mix(in srgb, var(--accent-500) 16%, transparent);
  --fg-selected: var(--accent-700);

  /* Semantic */
  --pos-50:  #e6f5ec; --pos-500: #1f8a4d; --pos-600: #176d3d; --pos-700: #115530;
  --neg-50:  #fdecec; --neg-500: #d33a3a; --neg-600: #b02a2a; --neg-700: #8a2222;
  --warn-50: #fdf3e0; --warn-500: #c97a14; --warn-600: #a4630e; --warn-700: #7e4c0b;
  --info-50: #e6f0fb; --info-500: #1f6fd1; --info-600: #1858a8; --info-700: #144684;

  /* Compatibility: keep --sap* aliases so existing .clavisco-* rules still work */
  --sapBackgroundColor: var(--bg-app);
  --sapBaseColor: var(--bg-canvas);
  --sapShellColor: var(--bg-shell);
  --sapTextColor: var(--fg-1);
  --sapTitleColor: var(--fg-1);
  --sapContent_LabelColor: var(--fg-3);
  --sapField_PlaceholderTextColor: var(--fg-4);
  --sapNeutralColor: var(--fg-3);
  --sapBrandColor: var(--accent-500);
  --sapInformativeColor: var(--info-500);
  --sapPositiveColor: var(--pos-500);
  --sapNegativeColor: var(--neg-500);
  --sapNegativeTextColor: var(--neg-600);
  --sapCriticalColor: var(--warn-500);
  --sapButton_Background: var(--bg-canvas);
  --sapButton_BorderColor: var(--border-2);
  --sapList_BorderColor: var(--border-1);
  --sapList_Hover_Background: var(--bg-hover);
  --sapList_SelectionBackgroundColor: var(--bg-selected);
  --sapList_SelectionBorderColor: var(--accent-300);
  --sapContent_Selected_TextColor: var(--fg-selected);
  --sapBlockLayer_Background: var(--bg-overlay);
  --sapContent_Shadow0: var(--shadow-1);
  --sapContent_Shadow2: var(--shadow-3);
  --sapShell_Hover_Background: var(--bg-hover);
  --sapFontFamily: var(--sap-font-family);

  /* App-level legacy aliases */
  --sap-active-color: var(--bg-selected);
  --sap-shell-tab-inactive: var(--fg-3);
  --sap-shell-tab-hover-bg: var(--bg-hover);
  --sap-shell-text-color: var(--fg-1);
  --sap-shell-text-secondary: var(--fg-2);
  --sap-shell-text-tertiary: var(--fg-3);
  --sap-shell-text-hint: var(--fg-4);
  --sap-shell-text-hover: var(--fg-1);
  --sap-shell-logo-accent: var(--accent-500);
  --sap-shell-border-muted: var(--border-1);
  --sap-shell-border-hover: var(--border-3);
  --sap-selected-bg-strong: var(--bg-selected-strong);
  --sap-hover-bg-subtle: var(--bg-hover);
  --sap-hover-bg-negative: color-mix(in srgb, var(--neg-500) 8%, transparent);
  --sap-accent-color: var(--accent-500);
  --sap-radius-general: var(--radius-3);
  --sap-radius-card: var(--radius-4);
  --sap-shadow-focus: var(--shadow-focus);
  --sap-font-size-title: var(--fs-title);
  --sap-font-size-subtitle: var(--fs-subtitle);
  --sap-font-size-body: var(--fs-body);
  --sap-font-size-label: var(--fs-label);
  --sap-font-size-small: var(--fs-small);
  --sap-font-size-kpi: var(--fs-kpi);
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg-app:     #0c0e12;
  --bg-canvas:  #15181d;
  --bg-muted:   #1a1e24;
  --bg-subtle:  #11141a;
  --bg-shell:   #0f1216;
  --bg-overlay: rgba(0,0,0,0.65);

  --fg-1: #e8eaed;
  --fg-2: #b8bdc6;
  --fg-3: #818892;
  --fg-4: #5a606a;
  --fg-on-accent: #ffffff;

  --border-1: #232830;
  --border-2: #2d333d;
  --border-3: #3a414c;

  --bg-hover:   color-mix(in srgb, #ffffff 5%, transparent);
  --bg-press:   color-mix(in srgb, #ffffff 8%, transparent);
  --bg-selected: color-mix(in srgb, var(--accent-500) 18%, transparent);
  --bg-selected-strong: color-mix(in srgb, var(--accent-500) 26%, transparent);
  --fg-selected: var(--accent-200);

  /* Semantic — slightly lighter for dark surfaces */
  --pos-50:  #0f2418; --pos-500: #3fb874; --pos-600: #2a9358; --pos-700: #1f6e42;
  --neg-50:  #2a1212; --neg-500: #f06464; --neg-600: #d33a3a; --neg-700: #b02a2a;
  --warn-50: #261a08; --warn-500: #e8a04e; --warn-600: #c97a14; --warn-700: #a4630e;
  --info-50: #0e1d2e; --info-500: #5a9bee; --info-600: #2c7ad8; --info-700: #1f6fd1;

  --shadow-1: 0 1px 0 0 rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow-2: 0 1px 2px 0 rgba(0,0,0,0.5), 0 4px 12px -4px rgba(0,0,0,0.4);
  --shadow-3: 0 4px 12px -2px rgba(0,0,0,0.5), 0 12px 32px -8px rgba(0,0,0,0.6);
}