/* ============================================================
   Trillic — Colors & Type
   Sources:
   - Brand Guidelines (uploads/): Primary #FFFFFF, Secondary #CDA973 (gold),
     Tertiary #1D1D1B (near-black). Gravita HUM typeface.
   - Product repo (trillic/trillic @staging): src/index.css + tailwind.config.ts
     shadcn/ui system with HSL tokens, "warm gold on warm off-white" palette.
   ============================================================ */

/* ----------------------------------------------------------
   1. Typography — fonts
   Gravita HUM is commercial (Type Dynamic). In the product it falls back
   to Outfit from Google Fonts. We use Outfit here for prototypes and
   flag this to the user as a substitution in README.md.
   ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
  /* ----- Brand raw tokens (from brand book) ----- */
  --brand-white:          #FFFFFF;  /* Primary */
  --brand-gold:           #CDA973;  /* Secondary — the "Trillic gold" */
  --brand-black:          #1D1D1B;  /* Tertiary — near-black */

  /* Darker/lighter gold for hover, accents, gradients */
  --brand-gold-50:        #FAF5EC;
  --brand-gold-100:       #F2E8D2;
  --brand-gold-200:       #E5D1A4;
  --brand-gold-300:       #D9BC83;
  --brand-gold-400:       #CDA973;  /* == brand-gold */
  --brand-gold-500:       #B8934F;
  --brand-gold-600:       #9A7B3F;
  --brand-gold-700:       #7A622F;

  /* Warm neutral ramp — derived from the product's HSL tokens
     (hue ~36–60, very low chroma) */
  --neutral-0:            #FFFFFF;
  --neutral-50:            hsl(40 10% 97%);  /* app background */
  --neutral-100:           hsl(36 12% 94%);  /* secondary */
  --neutral-200:           hsl(36 10% 88%);  /* border */
  --neutral-300:           hsl(36 8% 82%);
  --neutral-400:           hsl(40 5% 60%);
  --neutral-500:           hsl(40 5% 46%);  /* muted-foreground */
  --neutral-600:           hsl(60 4% 30%);
  --neutral-700:           hsl(60 4% 22%);
  --neutral-800:           hsl(60 4% 16%);
  --neutral-900:           hsl(60 4% 11%);  /* foreground / near-black */

  /* ----- Semantic status colors (from repo) ----- */
  --success:              hsl(160 84% 39%);
  --success-foreground:   #FFFFFF;
  --warning:              hsl(38 92% 50%);
  --warning-foreground:   hsl(38 92% 30%);
  --destructive:          hsl(0 84% 60%);
  --destructive-foreground: #FFFFFF;

  /* ---------------------------------------------------------
     2. Semantic foreground / background surface tokens
     These mirror the shadcn/ui naming used in the Trillic app
     (background, foreground, card, primary, muted, accent, …)
     so we can both prototype standalone pieces AND drop them
     into the real codebase.
     --------------------------------------------------------- */

  /* Surfaces */
  --background:           var(--neutral-50);
  --card:                 var(--neutral-0);
  --popover:              var(--neutral-0);
  --sidebar:              hsl(36 10% 93%);

  /* Foreground text on surfaces */
  --foreground:           var(--neutral-900);
  --card-foreground:      var(--neutral-900);
  --popover-foreground:   var(--neutral-900);
  --sidebar-foreground:   var(--neutral-900);

  /* Text hierarchy (custom — use these in prototypes) */
  --fg-1:                 var(--neutral-900);   /* Headers, strong body */
  --fg-2:                 hsl(60 4% 25%);       /* Secondary body, sub-labels */
  --fg-3:                 var(--neutral-500);   /* Muted / meta */
  --fg-4:                 var(--neutral-400);   /* Placeholder, disabled */
  --fg-on-gold:           var(--neutral-900);   /* black reads better on gold */

  /* Primary (brand gold) — used for CTAs, selection, focus rings */
  --primary:              var(--brand-gold);
  --primary-foreground:   var(--neutral-900);
  --primary-hover:        var(--brand-gold-500);
  --primary-soft:         hsl(36 35% 93%);       /* subtle gold tint for chips / rails */

  /* Secondary / muted / accent — all warm neutral */
  --secondary:            hsl(36 12% 94%);
  --secondary-foreground: hsl(60 4% 25%);
  --muted:                hsl(36 8% 92%);
  --muted-foreground:     hsl(40 5% 46%);
  --accent:               hsl(36 35% 93%);
  --accent-foreground:    hsl(36 47% 38%);

  /* Lines, inputs, focus */
  --border:               hsl(36 10% 88%);
  --input:                hsl(36 8% 90%);
  --ring:                 var(--brand-gold);

  /* Upload zone tokens (from product — used in CaseHub drag-drop) */
  --upload-border:        hsl(36 8% 85%);
  --upload-border-hover:  var(--brand-gold);
  --upload-bg:            hsl(36 6% 98%);
  --upload-bg-hover:      hsl(36 35% 95%);

  /* -----------------------------------------------------------
     3. Radii, shadows, spacing — from tailwind.config.ts + index.css
     ----------------------------------------------------------- */

  --radius-sm:            8px;    /* calc(12 - 4) */
  --radius-md:            10px;   /* calc(12 - 2) */
  --radius-lg:            12px;   /* app default = 0.75rem */
  --radius-xl:            16px;   /* Auth card, large dialogs */
  --radius-2xl:           20px;
  --radius-full:          9999px; /* badges, pills */

  /* Shadows — the product leans on soft, warm, low-contrast depth.
     The "glass-card" style blends backdrop-blur + two warm tints. */
  --shadow-xs:  0 1px 2px  hsl(60 4% 11% / 0.04);
  --shadow-sm:  0 1px 2px  hsl(60 4% 11% / 0.04), 0 4px 16px hsl(60 4% 11% / 0.06);
  --shadow-md:  0 2px 4px  hsl(60 4% 11% / 0.04), 0 8px 24px hsl(60 4% 11% / 0.08);
  --shadow-lg:  0 4px 12px hsl(60 4% 11% / 0.08), 0 20px 40px hsl(60 4% 11% / 0.10);
  --shadow-primary-glow: 0 8px 30px -12px hsl(36 47% 63% / 0.35);

  /* Spacing scale (4px base, matches tailwind default) */
  --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;

  /* -----------------------------------------------------------
     4. Type scale
     Stack: Gravita HUM → Outfit → system
     ----------------------------------------------------------- */

  --font-sans:
      'Gravita HUM',
      'Outfit',
      ui-sans-serif, system-ui, -apple-system, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-mono:
      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
      Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font weights — matches the brand book */
  --fw-light:    300;  /* body */
  --fw-regular:  400;  /* annotations, buttons */
  --fw-semibold: 600;  /* sub-headers */
  --fw-bold:     700;  /* headers */

  /* Type scale (matches product use, 4px grid) */
  --fs-display:  32px;   /* Page heroes, sign-in title */
  --fs-h1:       24px;   /* Page titles ("Settings", "Dashboard") */
  --fs-h2:       20px;   /* Section titles */
  --fs-h3:       18px;
  --fs-body:     14px;   /* Default body */
  --fs-body-lg:  16px;
  --fs-sm:       13px;   /* Helper text, secondary meta */
  --fs-xs:       12px;   /* Badges, status labels */
  --fs-caption:  11px;   /* "Powered by Trillic" footer */

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* Letter-spacing: the brand wordmark + headers use slight positive tracking */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.12em;   /* "TRILLIC" wordmark, caps labels */
}

/* -----------------------------------------------------------
   Dark mode — mirrors the product's .dark variant.
   ----------------------------------------------------------- */
.dark,
[data-theme="dark"] {
  --background:           hsl(60 4% 8%);
  --card:                 hsl(60 4% 12%);
  --popover:              hsl(60 4% 12%);
  --sidebar:              hsl(60 4% 6%);

  --foreground:           hsl(36 8% 95%);
  --card-foreground:      hsl(36 8% 95%);
  --popover-foreground:   hsl(36 8% 95%);
  --sidebar-foreground:   hsl(36 8% 95%);

  --fg-1: hsl(36 8% 95%);
  --fg-2: hsl(36 8% 85%);
  --fg-3: hsl(36 5% 55%);
  --fg-4: hsl(36 4% 40%);

  --primary:              var(--brand-gold);
  --primary-foreground:   hsl(60 4% 11%);
  --primary-soft:         hsl(36 25% 18%);

  --secondary:            hsl(60 4% 16%);
  --secondary-foreground: hsl(36 8% 85%);
  --muted:                hsl(60 3% 18%);
  --muted-foreground:     hsl(36 5% 55%);
  --accent:               hsl(36 25% 18%);
  --accent-foreground:    hsl(36 47% 75%);

  --border:               hsl(60 4% 18%);
  --input:                hsl(60 4% 18%);
  --ring:                 var(--brand-gold);

  --upload-border:        hsl(60 4% 22%);
  --upload-bg:            hsl(60 4% 10%);
  --upload-bg-hover:      hsl(36 25% 15%);

  --shadow-xs: 0 1px 2px  hsl(0 0% 0% / 0.4);
  --shadow-sm: 0 1px 2px  hsl(0 0% 0% / 0.4), 0 4px 16px hsl(0 0% 0% / 0.45);
  --shadow-md: 0 2px 4px  hsl(0 0% 0% / 0.45), 0 8px 24px hsl(0 0% 0% / 0.5);
  --shadow-lg: 0 4px 12px hsl(0 0% 0% / 0.55), 0 20px 40px hsl(0 0% 0% / 0.6);
}

/* ============================================================
   Semantic element styles — opinionated defaults for the brand.
   Prototypes can `@import "colors_and_type.css"` and get type
   + color hierarchy for free.
   ============================================================ */

html, body {
  background: var(--background);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

p { margin: 0; font-weight: var(--fw-light); }

small, .text-sm      { font-size: var(--fs-sm); color: var(--fg-3); }
.text-xs             { font-size: var(--fs-xs); color: var(--fg-3); letter-spacing: var(--ls-wide); }
.text-caps          { text-transform: uppercase; letter-spacing: var(--ls-wider); font-weight: var(--fw-semibold); }
.text-muted          { color: var(--fg-3); }
.text-gold           { color: var(--brand-gold); }

/* The signature Trillic wordmark treatment: all-caps, wide tracking */
.text-wordmark {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-black);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--brand-gold-200); color: var(--brand-black); }

/* Utility classes reused across cards and kits */
.brand-rule {
  /* The thin vertical rule that separates logomark from wordmark */
  display: inline-block;
  width: 1px;
  background: currentColor;
  opacity: 0.9;
}

.brand-wave-bg {
  background-image: url('assets/trillic_brand_pattern.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 110% auto;
}