/* ==========================================================================
   Korastel Design Tokens
   --------------------------------------------------------------------------
   Source of truth for the five approved brand colors and the Aurora Gradient:
     Notion → Korastel → Brand → Color System (Korastel Color System v1.0)
     Notion → Korastel → Brand → Logo Archive → Korastel Logo Archive
       (approved FINAL 1 sheet, "COLOR PALETTE" row — hex values are printed
        on the sheet and are reproduced verbatim below)

   Everything under "Derived" is a tint, shade, or neutral step computed from
   those five colors. Derived values exist because the approved palette alone
   cannot carry an accessible interface: Aurora Emerald reaches only 2.24:1 on
   Cloud White and Intelligent Teal only 3.18:1, so neither may be used for
   body-size text or links. The derived "ink" shades preserve the brand hue at
   an accessible luminance. No new hue is introduced anywhere in this file.

   Contrast ratios noted in comments are against Cloud White (#FFFFFF) unless
   stated otherwise.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- brand */
  --k-color-cloud-white: #ffffff;
  --k-color-aurora-emerald: #00c67a;
  --k-color-intelligent-teal: #009fb3;
  --k-color-deep-graphite: #111318;
  --k-color-titanium-gray: #e6e8ec;

  /* Aurora Gradient — Emerald → Teal.
     Foundation → Intelligence · Human → Technology · Present → Future */
  --k-gradient-aurora: linear-gradient(
    90deg,
    var(--k-color-aurora-emerald) 0%,
    var(--k-color-intelligent-teal) 100%
  );
  --k-gradient-aurora-diagonal: linear-gradient(
    135deg,
    var(--k-color-aurora-emerald) 0%,
    var(--k-color-intelligent-teal) 100%
  );

  /* ------------------------------------------------- derived · emerald */
  --k-color-emerald-tint: #e5f8f0; /* wash for quiet emerald surfaces      */
  --k-color-emerald-soft: #9fe8c9; /* hairlines, dividers on light         */
  --k-color-emerald-ink: #00834f; /* 4.82:1 — links and accent text        */
  --k-color-emerald-ink-strong: #006b42; /* 6.60:1 — hover / active text   */
  --k-color-emerald-bright: #00e08c; /* 10.65:1 on Deep Graphite           */

  /* ---------------------------------------------------- derived · teal */
  --k-color-teal-tint: #e4f4f7;
  --k-color-teal-ink: #007d8c; /* 4.87:1 — accent text                     */
  --k-color-teal-bright: #22c3e6; /* 8.86:1 on Deep Graphite               */

  /* ----------------------------------------- derived · graphite neutrals
     A single blue-grey ramp anchored at both ends by approved brand
     colors: step 900 is Deep Graphite, step 100 is Titanium Gray. */
  --k-color-graphite-900: #111318; /* = Deep Graphite            18.58:1   */
  --k-color-graphite-800: #1a1d25; /*                            16.85:1   */
  --k-color-graphite-700: #262a34; /*                            14.35:1   */
  --k-color-graphite-600: #3a3f4b; /*                            10.54:1   */
  --k-color-graphite-500: #565c6a; /*                             6.70:1   */
  --k-color-graphite-400: #6b7280; /*                             4.83:1   */
  --k-color-graphite-300: #9aa1ae; /* non-text use only           2.60:1   */
  --k-color-graphite-200: #c2c7d0;
  --k-color-graphite-150: #d7dae1;
  --k-color-graphite-100: #e6e8ec; /* = Titanium Gray                      */
  --k-color-graphite-50: #f4f5f7;
  --k-color-graphite-25: #fafbfc;

  /* -------------------------------------------------- semantic surfaces */
  --k-color-background: var(--k-color-cloud-white);
  --k-color-background-sunken: var(--k-color-graphite-25);
  --k-color-surface: var(--k-color-cloud-white);
  --k-color-surface-raised: var(--k-color-cloud-white);
  --k-color-surface-subtle: var(--k-color-graphite-50);
  --k-color-surface-inverse: var(--k-color-graphite-900);

  /* ------------------------------------------------------ semantic text */
  --k-color-text: var(--k-color-graphite-900);
  --k-color-text-secondary: var(--k-color-graphite-500);
  --k-color-text-muted: var(--k-color-graphite-400);
  --k-color-text-accent: var(--k-color-emerald-ink);
  --k-color-text-on-brand: var(--k-color-graphite-900); /* 8.28:1 on emerald */
  --k-color-text-on-inverse: var(--k-color-cloud-white);
  --k-color-text-on-inverse-secondary: var(--k-color-graphite-200);

  /* --------------------------------------------------- semantic borders */
  --k-color-border: var(--k-color-graphite-100);
  --k-color-border-strong: var(--k-color-graphite-150);
  --k-color-border-inverse: rgb(255 255 255 / 0.14);

  /* ---------------------------------------------------- interactive */
  --k-color-action: var(--k-color-aurora-emerald);
  --k-color-action-hover: #00b46f;
  --k-color-action-active: #009e61;
  --k-color-action-quiet-bg: var(--k-color-emerald-tint);
  --k-color-focus-ring: var(--k-color-teal-ink);
  --k-color-focus-ring-inverse: var(--k-color-teal-bright);

  /* ------------------------------------------------------ system status
     Functional colors, not brand colors. Validation and error messaging
     needs a signal that is not confusable with the Aurora palette; these
     are used only for feedback states and never for brand expression. */
  --k-color-danger: #b3261e; /* 6.54:1                                     */
  --k-color-danger-tint: #fdeceb;
  --k-color-danger-inverse: #ff8a80; /* 8.14:1 on Deep Graphite            */
  --k-color-success: var(--k-color-emerald-ink);
  --k-color-success-tint: var(--k-color-emerald-tint);

  /* ------------------------------------------------------- typography
     The Korastel wordmark is a custom geometric sans supplied as artwork.
     Interface type uses the platform's geometric-leaning system faces so
     the site ships no webfont payload. See design-system/README.md for the
     licensed-typeface upgrade path. */
  --k-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  --k-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --k-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  --k-text-2xs: 0.6875rem;
  --k-text-xs: 0.75rem;
  --k-text-sm: 0.875rem;
  --k-text-md: 1rem;
  --k-text-lg: 1.0625rem;
  --k-text-xl: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
  --k-text-2xl: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);
  --k-text-3xl: clamp(1.625rem, 1.3vw + 1.3rem, 2.125rem);
  --k-text-4xl: clamp(2rem, 2.6vw + 1.4rem, 3rem);
  --k-text-5xl: clamp(2.5rem, 4.6vw + 1.4rem, 4.25rem);

  --k-leading-tight: 1.06;
  --k-leading-snug: 1.2;
  --k-leading-normal: 1.5;
  --k-leading-relaxed: 1.65;

  --k-weight-regular: 400;
  --k-weight-medium: 500;
  --k-weight-semibold: 600;
  --k-weight-bold: 700;

  --k-tracking-tight: -0.022em;
  --k-tracking-snug: -0.012em;
  --k-tracking-normal: 0em;
  --k-tracking-wide: 0.08em;
  --k-tracking-wider: 0.18em; /* echoes the KORASTEL wordmark spacing */

  /* ----------------------------------------------------------- spacing */
  --k-space-1: 0.25rem;
  --k-space-2: 0.5rem;
  --k-space-3: 0.75rem;
  --k-space-4: 1rem;
  --k-space-5: 1.25rem;
  --k-space-6: 1.5rem;
  --k-space-8: 2rem;
  --k-space-10: 2.5rem;
  --k-space-12: 3rem;
  --k-space-16: 4rem;
  --k-space-20: 5rem;
  --k-space-24: 6rem;
  --k-space-32: 8rem;

  --k-section-y: clamp(4.5rem, 8vw, 8rem);

  /* ------------------------------------------------------------ layout */
  --k-container: 76rem;
  --k-container-narrow: 46rem;
  --k-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ------------------------------------------------------------ radius */
  --k-radius-xs: 0.25rem;
  --k-radius-sm: 0.375rem;
  --k-radius-md: 0.625rem;
  --k-radius-lg: 1rem;
  --k-radius-xl: 1.5rem;
  --k-radius-pill: 999rem;

  /* ---------------------------------------------------------- elevation
     Shadows are tinted with Deep Graphite rather than pure black so
     elevation stays in the same blue-grey family as the neutrals. */
  --k-shadow-xs: 0 1px 2px rgb(17 19 24 / 0.05);
  --k-shadow-sm: 0 1px 3px rgb(17 19 24 / 0.06), 0 1px 2px rgb(17 19 24 / 0.04);
  --k-shadow-md: 0 8px 24px -12px rgb(17 19 24 / 0.16),
    0 2px 6px -2px rgb(17 19 24 / 0.06);
  --k-shadow-lg: 0 24px 60px -28px rgb(17 19 24 / 0.28),
    0 6px 16px -8px rgb(17 19 24 / 0.08);

  /* -------------------------------------------------------------- motion
     Restrained by policy: short durations, one standard easing curve. */
  --k-duration-fast: 120ms;
  --k-duration-base: 200ms;
  --k-duration-slow: 420ms;
  --k-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --k-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --------------------------------------------------------------- misc */
  --k-focus-width: 2px;
  --k-focus-offset: 3px;
  --k-z-header: 100;
  --k-z-overlay: 200;
}

/* --------------------------------------------------------------------------
   Inverse context — apply to any Deep Graphite section so nested components
   pick up correct foregrounds without bespoke overrides.
   -------------------------------------------------------------------------- */
.k-theme-inverse {
  --k-color-background: var(--k-color-graphite-900);
  --k-color-surface: var(--k-color-graphite-800);
  --k-color-surface-subtle: var(--k-color-graphite-700);
  --k-color-text: var(--k-color-cloud-white);
  --k-color-text-secondary: var(--k-color-graphite-200);
  --k-color-text-muted: var(--k-color-graphite-300);
  --k-color-text-accent: var(--k-color-emerald-bright);
  --k-color-border: rgb(255 255 255 / 0.12);
  --k-color-border-strong: rgb(255 255 255 / 0.22);
  --k-color-focus-ring: var(--k-color-focus-ring-inverse);
  --k-color-danger: var(--k-color-danger-inverse);
  --k-color-action-quiet-bg: rgb(0 198 122 / 0.12);
  color: var(--k-color-text);
  background-color: var(--k-color-background);
}