/*
 * hoadon.pro — "Tech Blue · Liquid Glass" token draft (Tailwind v4, shadcn radix-vega).
 * Draft only: not wired into any project. Names match ferry-design-system/app/globals.css
 * so screens port 1:1. Contrast ratios are computed (WCAG 2.x relative luminance), see report §4.
 *
 * Rule: glass = chrome only (sidebar, topbar, overlays, marketing nav/hero cards).
 *       Solid = every surface that carries data (tables, forms, invoice detail, numbers).
 */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

/* ───────── 1. Palette (light) ───────── */
:root {
  /* surfaces (solid) */
  --background: #F3F7FD;          /* app canvas under the backdrop */
  --card: #FFFFFF;                /* data surface: tables, forms */
  --card-foreground: #0A1A3A;
  --popover: #FFFFFF;             /* solid fallback of glass-strong */
  --popover-foreground: #0A1A3A;
  --secondary: #EAF0FA;           /* table header, zebra, input fill */
  --secondary-foreground: #0A1A3A;
  --muted: #EAF0FA;
  --accent: #E3ECFF;              /* selected row / active nav tint */
  --accent-foreground: #123EAE;   /* 7.61:1 on --accent */

  /* text */
  --foreground: #0A1A3A;          /* 17.19 on card, 15.99 on background */
  --muted-foreground: #46587A;    /* 7.15 on card, 6.24 on secondary */
  --subtle-foreground: #5B6C8C;   /* 5.29 on card, 4.92 on background: smallest allowed text */

  /* brand */
  --primary: #1B55E0;             /* Tech Blue. 6.14 vs white text and vs card */
  --primary-foreground: #FFFFFF;
  --primary-hover: #1747C2;       /* white 7.73 */
  --brand: #0891B2;               /* cyan accent, graphics / large text only (3.68 on white) */
  --brand-text: #0B6B86;          /* cyan for text (6.07 on white) */
  --brand-foreground: #FFFFFF;
  --ring: #1B55E0;                /* focus ring, 5.7 on background */

  /* semantic (always pair with a label/icon, never colour alone) */
  --success: #15803D;  --success-tint: #DCFCE7;  --success-ink: #0F5F2E;  /* 7.09 */
  --warning: #9A5B00;  --warning-tint: #FEF3C7;  --warning-ink: #7A4700;  /* 6.91 */
  --destructive: #C2262E; --destructive-tint: #FEE2E2; --destructive-ink: #9B1C23; /* 6.65 */
  --info: #1B55E0;     --info-tint: #E3ECFF;     --info-ink: #123EAE;

  /* lines */
  --border: #D5DDEB;              /* decorative hairline, 1.37:1 by design */
  --input: #6F83A6;               /* control boundary: 3.84 on white (WCAG 1.4.11 needs 3:1) */

  /* charts (colour-blind-safe order; also use pattern/label) */
  --chart-1: #1B55E0; --chart-2: #0891B2; --chart-3: #7C5CFA; --chart-4: #E08A00; --chart-5: #5B6C8C;

  --radius: 0.75rem;              /* 12px; Liquid Glass favours larger, continuous curvature */

  /* sidebar = glass layer, but text tokens must pass on the worst backdrop */
  --sidebar: transparent;
  --sidebar-foreground: #0A1A3A;
  --sidebar-primary: #1B55E0;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #1B55E0 / 10%;
  --sidebar-accent-foreground: #123EAE;
  --sidebar-border: #0A1A3A / 9%;

  /* ───────── 2. Glass knobs (single source; every glass surface reads these) ───────── */
  --glass-tint: oklch(1 0 0 / 0.72);          /* nav/chrome. ink >= 9.3:1 over #0A1A3A, >= 11.8 over #2F6BFF */
  --glass-tint-strong: oklch(1 0 0 / 0.85);   /* overlays: popover, dialog, menu */
  --glass-border: oklch(1 0 0 / 0.65);        /* outer hairline */
  --glass-highlight: oklch(1 0 0 / 0.95);     /* 1px specular top edge */
  --glass-glow: oklch(1 0 0 / 0.35);          /* soft corner light */
  --glass-shadow: 0 8px 32px oklch(0.25 0.08 262 / 0.12), 0 1px 2px oklch(0.25 0.08 262 / 0.08);
  --glass-blur: 20px;
  --glass-saturate: 170%;
  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  --glass-refract: none;                      /* set to url(#lg-refract) in Chromium only, see @supports below */

  /* backdrop scene (what glass refracts) */
  --backdrop-1: oklch(0.72 0.16 262 / 0.55);
  --backdrop-2: oklch(0.82 0.11 215 / 0.50);
  --backdrop-3: oklch(0.78 0.10 285 / 0.35);
}

/* ───────── 3. Palette (dark) ───────── */
.dark {
  --background: #050B1B;
  --card: #0C1730;
  --card-foreground: #EAF0FC;
  --popover: #0F1C3B;
  --popover-foreground: #EAF0FC;
  --secondary: #13213F;
  --secondary-foreground: #EAF0FC;
  --muted: #13213F;
  --accent: #16295A;
  --accent-foreground: #B7CEFF;   /* 8.86 on --accent */

  --foreground: #EAF0FC;          /* 15.55 on card */
  --muted-foreground: #A3B3D1;    /* 8.41 on card */
  --subtle-foreground: #7F91B3;   /* 5.59 on card */

  --primary: #6C9CFF;             /* 6.64 on card; text on it: #06122E 6.91 */
  --primary-foreground: #06122E;
  --primary-hover: #8AB0FF;
  --brand: #38D3F0;               /* 9.95 on card, usable as text */
  --brand-text: #38D3F0;
  --brand-foreground: #06122E;
  --ring: #6C9CFF;

  --success: #4ADE80;  --success-tint: #0F2E22;  --success-ink: #86EFAC;
  --warning: #FBBF24;  --warning-tint: #33260C;  --warning-ink: #FCD34D;
  --destructive: #FF8A8F; --destructive-tint: #3A1618; --destructive-ink: #FCA5A5;
  --info: #6C9CFF;     --info-tint: #16295A;     --info-ink: #B7CEFF;

  --border: #243557;
  --input: #657AA6;               /* 4.14 on card */

  --chart-1: #6C9CFF; --chart-2: #38D3F0; --chart-3: #A78BFA; --chart-4: #FBBF24; --chart-5: #8497BF;

  --sidebar-foreground: #EAF0FC;
  --sidebar-primary: #6C9CFF;
  --sidebar-primary-foreground: #06122E;
  --sidebar-accent: #FFFFFF / 8%;
  --sidebar-accent-foreground: #EAF0FC;
  --sidebar-border: #FFFFFF / 9%;

  --glass-tint: oklch(0.2 0.045 262 / 0.72);       /* ink >= 6.2:1 even over pure white backdrop */
  --glass-tint-strong: oklch(0.2 0.045 262 / 0.85);
  --glass-border: oklch(1 0 0 / 0.14);
  --glass-highlight: oklch(1 0 0 / 0.20);
  --glass-glow: oklch(1 0 0 / 0.07);
  --glass-shadow: 0 8px 32px oklch(0 0 0 / 0.45), 0 1px 2px oklch(0 0 0 / 0.4);

  --backdrop-1: oklch(0.45 0.16 262 / 0.50);
  --backdrop-2: oklch(0.40 0.09 215 / 0.40);
  --backdrop-3: oklch(0.38 0.12 285 / 0.30);
}

/* ───────── 4. Tailwind v4 theme bridge ───────── */
@theme inline {
  --font-sans: var(--font-sans), "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
  --color-background: var(--background);   --color-foreground: var(--foreground);
  --color-card: var(--card);               --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);         --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);         --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);     --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);             --color-muted-foreground: var(--muted-foreground);
  --color-subtle-foreground: var(--subtle-foreground);
  --color-accent: var(--accent);           --color-accent-foreground: var(--accent-foreground);
  --color-brand: var(--brand);             --color-brand-text: var(--brand-text);
  --color-success: var(--success);         --color-warning: var(--warning);
  --color-destructive: var(--destructive); --color-info: var(--info);
  --color-border: var(--border);           --color-input: var(--input);   --color-ring: var(--ring);
  --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) * 0.6);  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);              --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.4);
}

/* ───────── 5. Glass utilities ───────── */
/* Chrome: floating sidebar, sticky topbar, marketing navbar. Never inside a scroller. */
@utility glass {
  background-color: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
/* Overlays: popover, dropdown, dialog, sheet, command, toast. Denser tint. */
@utility glass-strong {
  background-color: var(--glass-tint-strong);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
/* Specular rim + corner light (pure gradients, no filter cost). Pair with glass / glass-strong. */
@utility glass-sheen {
  background-image:
    linear-gradient(to bottom, var(--glass-highlight), transparent 1px),
    radial-gradient(140% 90% at 0% 0%, var(--glass-glow), transparent 55%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 oklch(0 0 0 / 0.04);
}
/* Scene that glass refracts. One per page, fixed, behind everything. */
@utility app-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 50% at 6% 0%, var(--backdrop-1), transparent 72%),
    radial-gradient(45% 42% at 100% 6%, var(--backdrop-2), transparent 70%),
    radial-gradient(70% 55% at 62% 108%, var(--backdrop-3), transparent 72%),
    var(--background);
}
/* Data surface: the opposite of glass. Sticky table headers MUST use this. */
@utility surface-solid {
  background-color: var(--card);
  border: 1px solid var(--border);
}

/* ───────── 6. Progressive enhancement: SVG refraction (Chromium only) ─────────
 * backdrop-filter:url(#id) is only honoured by Chromium. Safari/Firefox keep the blur() above.
 * Use on small, floating, non-scrolling elements (marketing navbar pill, hero badge, command palette),
 * NOT on the app sidebar, large cards, or anything near a table (GPU cost grows with area).
 * <svg> with <filter id="lg-refract"> (feImage displacement map + 3x feDisplacementMap for
 * chromatic dispersion) is injected once; see github.com/ccl125/liquid-glass for a reference impl. */
@supports (backdrop-filter: url(#lg-refract)) and (not (-webkit-hyphens: none)) {
  .glass-refract {
    -webkit-backdrop-filter: url(#lg-refract) saturate(var(--glass-saturate));
    backdrop-filter: url(#lg-refract) saturate(var(--glass-saturate));
  }
}

/* ───────── 7. Accessibility fallbacks ───────── */
/* OS-level (Chromium 118+, Safari/Firefox do not expose it) or in-app toggle [data-transparency="reduced"] */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint: var(--popover); --glass-tint-strong: var(--popover);
    --glass-filter: none; --glass-border: var(--border);
  }
  .glass-refract { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
[data-transparency="reduced"] {
  --glass-tint: var(--popover); --glass-tint-strong: var(--popover);
  --glass-filter: none; --glass-border: var(--border);
}
[data-transparency="reduced"] .glass-refract { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (prefers-contrast: more) {
  :root { --glass-tint: var(--popover); --glass-tint-strong: var(--popover); --glass-filter: none; --border: var(--input); }
}
@media (forced-colors: active) {
  .glass, .glass-strong, .glass-refract { background: Canvas; backdrop-filter: none; border: 1px solid CanvasText; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* No backdrop-filter support at all: opaque tint */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-tint: var(--popover); --glass-tint-strong: var(--popover); }
}

/* ───────── 8. Typography helpers ───────── */
@layer base {
  html { font-family: var(--font-sans); font-feature-settings: "calt" 1; }
  /* money, MST, invoice no., dates: aligned columns */
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -0.01em; }
  :focus-visible { outline: 3px solid color-mix(in oklab, var(--ring) 80%, white); outline-offset: 2px; }
}