/* ============================================================
   KJA Brand Design Tokens
   Source: Referance.md

   NOTE: html stays at browser default (16px) so Tailwind CDN
   utility classes work correctly. Heading/spacing sizes are
   expressed in px and clamp() instead of rem-based 62.5% trick.
   ============================================================ */

/* Inter font - self-hosted */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Color Palette (Core) --- */
  --color-base:       #0a2434;
  --color-primary:    #f5d318;
  --color-secondary:  #FF9500;
  --color-accent:     #bcc8a2;
  --color-action:     #de1604;
  --color-tertiary:   #867A5B;
  --color-black:      #000000;
  --color-white:      #ffffff;

  /* Semantic */
  --color-success:    #29A745;
  --color-info:       #18A2B8;
  --color-warning:    #FFC10A;
  --color-danger:     #DC3545;

  /* Hover variants */
  --color-primary-hover:    #dfc014;
  --color-secondary-hover:  #e68800;
  --color-action-hover:     #b81303;
  --color-accent-hover:     #a8b68e;

  /* Neutral scale */
  --neutral-ultra-light: #f9fafb;
  --neutral-light:       #d1d5db;
  --neutral-medium:      #6b7280;
  --neutral-dark:        #374151;
  --neutral-ultra-dark:  #111827;

  /* Transparency */
  --black-trans-20:  rgba(0, 0, 0, 0.2);
  --white-trans-20:  rgba(255, 255, 255, 0.2);

  /* --- Text Colors --- */
  --text-dark:        var(--color-black);
  --text-dark-muted:  var(--neutral-dark);
  --text-light:       var(--color-white);
  --text-light-muted: var(--neutral-light);

  /* --- Typography --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Base text sizes (px, compatible with Tailwind default 16px root) */
  --text-base-desktop: 18px;
  --text-base-mobile:  16px;
  --line-height-body:  calc(6px + 2ex);

  /* Heading scale: 1.333 (Perfect Fourth) from 18px base */
  --heading-line-height: 1.2;
  --h6: 18px;
  --h5: 24px;
  --h4: 32px;
  --h3: 43px;
  --h2: 57px;
  --h1: 76px;

  /* Small text */
  --text-s:  12px;
  --text-xs: 11px;

  /* --- Spacing --- */
  --space-base: 30px;
  --space-base-min: 24px;
  --space-scale: 1.5;
  --space-xs:  13px;
  --space-s:   20px;
  --space-m:   30px;
  --space-l:   45px;
  --space-xl:  68px;
  --paragraph-spacing: 1em;
  --content-feature: 50px;

  /* Section padding: 4x base mobile (120px), 6x base desktop (180px) */
  --section-padding-y: calc(var(--space-base) * 4);       /* 120px */
  --section-padding-y-lg: calc(var(--space-base) * 6);    /* 180px */
  --section-padding-x-min: 24px;
  --section-padding-x-max: 30px;

  /* --- Layout --- */
  --viewport-min: 320px;
  --viewport-max: 1280px;
  --body-max-width: 1920px;

  /* Breakpoints (reference only - use Tailwind classes or media queries) */
  --bp-xs:  360px;
  --bp-s:   480px;
  --bp-m:   768px;
  --bp-l:   992px;
  --bp-xl:  1280px;
  --bp-xxl: 1440px;

  /* --- Borders & Radius --- */
  --border-width: 1px;
  --border-style: solid;
  --border-color-dark:  var(--black-trans-20);
  --border-color-light: var(--white-trans-20);
  --radius:     16px;
  --radius-sm:  11px;
  --radius-lg:  24px;
  --btn-radius: 10px;

  /* --- Shadows --- */
  --shadow-body: 0 0 80px 0 var(--black-trans-20);

  /* --- Links & Focus --- */
  --link-color: var(--color-white);
  --link-hover: var(--color-action-hover);
  --focus-style: outline;
  --focus-width: 0.2rem;
  --focus-offset: 0.25em;
  --focus-color: var(--color-action);

  /* --- Transitions --- */
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
  --transition-properties: background, color, border;

  /* --- Buttons (Global Shape) --- */
  --btn-font-weight: 700;
  --btn-min-width: 140px;
  --btn-padding-block: 0.75em;
  --btn-padding-inline: 1.5em;
  --btn-border-width: 0.25rem;
  --btn-line-height: 1.2;
  --btn-text-min: 14px;
  --btn-text-max: 18px;

  /* --- Forms --- */
  --input-height: 50px;
  --input-radius: var(--btn-radius);
  --input-padding-x: 1em;
  --input-padding-y: 0.5em;
  --field-margin-bottom: 1.5em;
  --help-text-min: 12px;
  --help-text-max: 14px;

  /* --- Cards --- */
  --card-padding: var(--space-m);
  --card-radius: var(--radius);
  --card-heading-size: var(--h3);
  --card-text-size: var(--text-s);
  --card-icon-size: 68px;
  --card-avatar-size: 140px;
  --card-media-aspect: 4 / 3;

  /* Content gap */
  --content-gap: var(--space-m);
}

/* --- Base Styles --- */
body {
  font-family: var(--font-family);
  font-size: var(--text-base-desktop);
  line-height: var(--line-height-body);
  color: var(--text-dark);
  background: var(--color-white);
  overflow-x: hidden;
}

/* Full-width page wrapper */
.page-container {
  position: relative;
}

/* Constrain inner content width within full-width sections */
.page-container > header > div:first-child,
.page-container > section > div:first-child,
.page-container > main > section > div:first-child,
.page-container > footer > div:first-child {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Section vertical spacing: 3x base (90px) mobile, 4x base (120px) desktop */
.section-padding {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}
@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--section-padding-y-lg);
    padding-bottom: var(--section-padding-y-lg);
  }
}

@media (max-width: 768px) {
  body {
    font-size: var(--text-base-mobile);
  }
}

/* --- Heading Defaults (in @layer base so Tailwind utilities can override) --- */
@layer base {
  h1 { font-size: var(--h1); line-height: var(--heading-line-height); }
  h2 { font-size: var(--h2); line-height: var(--heading-line-height); }
  h3 { font-size: var(--h3); line-height: var(--heading-line-height); }
  h4 { font-size: var(--h4); line-height: var(--heading-line-height); }
  h5 { font-size: var(--h5); line-height: var(--heading-line-height); }
  h6 { font-size: var(--h6); line-height: var(--heading-line-height); }

  @media (max-width: 768px) {
    h1 { font-size: clamp(36px, 8vw, var(--h1)); }
    h2 { font-size: clamp(28px, 6vw, var(--h2)); }
    h3 { font-size: clamp(24px, 5vw, var(--h3)); }
  }
}

/* --- Focus Styles --- */
:focus-visible {
  outline: var(--focus-width) var(--focus-style) var(--focus-color);
  outline-offset: var(--focus-offset);
}

/* --- Selection --- */
::selection {
  background: var(--color-primary);
  color: var(--color-black);
}