/*
  Bora — design tokens (CSS custom properties)
  REVISION: this version supersedes the previous tokens.css. Color scale,
  typography, spacing, buttons, and grid below come from the current working
  session (see design-tokens.json in this same delivery) and are now the
  source of truth. Chamfer geometry and motion were not redefined this
  session and are carried over unchanged from the prior version.
  Do not hand-edit a hex value here without updating tokens.json to match.
*/

:root {
  /* ---------- 1. Color -- primitives ---------- */
  --color-primary-50: #E6ECF9;
  --color-primary-100: #CEDAF3;
  --color-primary-150: #B5C7ED;
  --color-primary-200: #9CB5E7;
  --color-primary-300: #6B8FDA;
  --color-primary-400: #396ACE;
  --color-primary-500: #0845C2;
  --color-primary-600: #06379B;
  --color-primary-700: #052974;
  --color-primary-800: #031C4E;
  --color-primary-850: #02153A;
  --color-primary-900: #020E27;
  --color-primary-950: #010713;

  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F4FAFF;
  --color-neutral-200: #CACFD3;
  --color-neutral-700: #4A4C4F;
  --color-neutral-1000: #08090A;

  --color-success-100: #E3F7ED; --color-success-300: #7DF2B5; --color-success-500: #35C77B; --color-success-700: #06793E; --color-success-900: #113B25;
  --color-warning-100: #F7F0E3; --color-warning-300: #F2C67D; --color-warning-500: #F5A623; --color-warning-700: #935E08; --color-warning-900: #3B2B11;
  --color-error-100:   #F7E3E6; --color-error-300:   #F27D8E; --color-error-500:   #DC1431; --color-error-700:   #A00D22; --color-error-900:   #3B1117;
  --color-info-100:    #E3EEF7; --color-info-300:    #7DBDF2; --color-info-500:    #3B9EEF; --color-info-700:    #0A6BBB; --color-info-900:    #11283B;

  /* ---------- 2. Color -- module category palette ----------
     REVISION: renamed from the previous inventory/pricing/sales/payment/
     reporting/access-control set. Now scoped to the six confirmed module
     categories: booking, capacity, revenue, customer, reporting, platform.
     Same job as before (bora-decision-logic.md par.2): module identification
     only, never a stand-in for accent.action / accent.signal. */
  --color-category-booking: #897EE7;
  --color-category-capacity: #5EB4D4;
  --color-category-revenue: #51CFB0;
  --color-category-customer: #C661E5;
  --color-category-reporting: #E250AD;
  --color-category-platform: #D2B37F;

  /* ---------- 3. Color -- semantic ---------- */
  --surface-ground: var(--color-primary-950);
  --surface-card: var(--color-primary-900);
  --surface-panel: var(--color-primary-800);
  --surface-light: var(--color-primary-50);

  --ink-primary: var(--color-neutral-0);
  --ink-muted: var(--color-primary-200);
  --ink-on-light: var(--color-primary-800);
  --ink-on-accent: var(--color-neutral-0);
  --ink-on-white: var(--color-neutral-1000);

  --accent-action: var(--color-primary-500);
  --accent-signal: var(--color-primary-400);
  --glow-core: var(--color-primary-600);

  --headline-from: var(--color-neutral-0);
  --headline-to: var(--color-primary-150);

  --category-booking: var(--color-category-booking);
  --category-capacity: var(--color-category-capacity);
  --category-revenue: var(--color-category-revenue);
  --category-customer: var(--color-category-customer);
  --category-reporting: var(--color-category-reporting);
  --category-platform: var(--color-category-platform);

  --status-success-solid: var(--color-success-500);
  --status-success-fg-light: var(--color-success-300);
  --status-success-fg-dark: var(--color-success-700);
  --status-success-surface-light: var(--color-success-900);
  --status-success-surface-dark: var(--color-success-100);
  --status-success-border-light: var(--color-success-300);
  --status-success-border-dark: var(--color-success-500);

  --status-warning-solid: var(--color-warning-500);
  --status-warning-fg-light: var(--color-warning-300);
  --status-warning-fg-dark: var(--color-warning-700);
  --status-warning-surface-light: var(--color-warning-900);
  --status-warning-surface-dark: var(--color-warning-100);
  --status-warning-border-light: var(--color-warning-300);
  --status-warning-border-dark: var(--color-warning-500);

  --status-error-solid: var(--color-error-500);
  --status-error-fg-light: var(--color-error-300);
  --status-error-fg-dark: var(--color-error-700);
  --status-error-surface-light: var(--color-error-900);
  --status-error-surface-dark: var(--color-error-100);
  --status-error-border-light: var(--color-error-300);
  --status-error-border-dark: var(--color-error-500);

  --status-info-solid: var(--color-info-500);
  --status-info-fg-light: var(--color-info-300);
  --status-info-fg-dark: var(--color-info-700);
  --status-info-surface-light: var(--color-info-900);
  --status-info-surface-dark: var(--color-info-100);
  --status-info-border-light: var(--color-info-300);
  --status-info-border-dark: var(--color-info-500);

  --state-on-track: var(--color-info-500);
  --state-at-risk: var(--color-warning-500);
  --state-delayed: var(--color-error-500);

  /* ---------- 4. Gradients ---------- */
  --bg-gradient-one: radial-gradient(93.23% 70.71% at 50% 50%, var(--color-primary-600) 0%, var(--color-primary-950) 100%);
  --bg-gradient-two: radial-gradient(127.48% 84.16% at 70% 53.28%, var(--color-primary-600) 0%, var(--color-primary-950) 100%);
  --bg-gradient-three:
    radial-gradient(166.67% 75.52% at 42.74% 22.9%, var(--color-primary-900) 0%, rgba(2,14,39,0) 100%),
    radial-gradient(93.23% 70.71% at 50% 6.36%, var(--color-primary-900) 0%, rgba(2,14,39,0) 100%),
    radial-gradient(58.89% 78.53% at 86.46% 10.8%, var(--color-primary-900) 0%, rgba(2,14,39,0) 100%),
    radial-gradient(59.29% 74.41% at 76.42% 55.06%, var(--color-primary-900) 0%, rgba(2,14,39,0) 100%),
    radial-gradient(92.62% 133.5% at 61.6% 29.14%, var(--color-primary-800) 20%, rgba(5,41,116,0) 100%),
    radial-gradient(70.17% 124.75% at 48.51% 0%, var(--color-primary-500) 0%, rgba(8,69,194,0) 100%),
    linear-gradient(180deg, var(--color-primary-500) 0%, var(--color-primary-400) 100%);
  --bg-gradient-four:
    radial-gradient(69.06% 114.92% at 50% 123.7%, var(--color-primary-950) 0%, rgba(2,14,39,0) 100%),
    radial-gradient(128.62% 114.02% at -16.11% 42.47%, var(--color-primary-950) 0%, rgba(2,14,39,0) 100%),
    radial-gradient(98.15% 88.08% at 2.57% 100%, var(--color-primary-900) 0%, rgba(3,28,78,0) 100%),
    radial-gradient(66.97% 106.99% at 72.5% 100%, var(--color-primary-900) 0%, rgba(3,28,78,0) 100%),
    radial-gradient(84.08% 147.12% at 93.72% 100%, var(--color-primary-900) 0%, rgba(3,28,78,0) 100%),
    radial-gradient(59.99% 110.83% at 40.69% 78.83%, var(--color-primary-900) 0%, rgba(3,28,78,0) 100%),
    radial-gradient(59.87% 117.81% at 101.28% -7.78%, var(--color-primary-400) 0%, rgba(57,106,206,0) 100%),
    linear-gradient(55deg, var(--color-primary-600) 32.01%, var(--color-primary-500) 100%);
  --bg-gradient-five: radial-gradient(96.75% 72.67% at 50% 100%, var(--color-primary-600) 0%, var(--color-primary-950) 100%);
  --headline-text-gradient: linear-gradient(92deg, var(--headline-from) 0%, var(--headline-to) 100%);

  /* ---------- 5. Font ---------- */
  --font-montserrat: 'Montserrat', sans-serif;
  --font-tektur: 'Tektur', sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --leading-tight: 1;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ---------- 6. Motion (unchanged from previous version -- no conflict) ---------- */
  --motion-instant: 0ms;
  --motion-snap: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- 7. Typography (mobile base, < 768px) ---------- */
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 28px;
  --text-h4: 20px;
  --h4-paragraph-spacing: 12px;
  --text-subtitle: 16px;
  --text-body: 15px;
  --text-button-l: 18px;
  --text-button-m-link: 16px;
  --text-button-s: 14px;
  --text-helper: 12px;
  --text-number-large: 48px;
  --text-number-huge: 64px;

  /* ---------- 8. Spacing (mobile base) ---------- */
  --section-margin: 56px;
  --padding-l1: 40px;
  --padding-l2: 16px;
  --padding-l3: 8px;
  --gap-l1: 40px;
  --gap-l2: 16px;
  --gap-l3: 8px;
  --gap-l4: 4px;

  /* ---------- 9. Button L (mobile base) ---------- */
  --btn-l-padding-inline: 32px;
  --btn-l-padding-block: 16px;
  --btn-l-icon-size: 18px;
  --btn-l-icon-gap: 8px;

  /* ---------- 10. Button M (mobile base) ---------- */
  --btn-m-padding-inline: 24px;
  --btn-m-padding-block: 14px;
  --btn-m-icon-size: 18px;
  --btn-m-icon-gap: 8px;

  /* ---------- 11. Button S (mobile base) ---------- */
  --btn-s-padding-inline: 16px;
  --btn-s-padding-block: 12px;
  --btn-s-icon-size: 14px;
  --btn-s-icon-gap: 6px;

  /* ---------- 12. Icon category (mobile base) ---------- */
  --icon-category-size: 56px;

  /* ---------- 13. Grid (mobile base) ---------- */
  --grid-columns: 4;
  --grid-margin: 16px;
  --grid-gap: 16px;
  --grid-column-width: 74px;

  /* ---------- 14. Chamfer (unchanged from previous version -- no conflict) ---------- */
  --bora-chamfer-hairline: 2px;
  --bora-chamfer-sm: 6px;
  --bora-chamfer-md: 12px;
  --bora-chamfer-lg: 16px;

  /* ---------- 14b. Cut / slant geometry ----------
     REVISION: the slant plate is now a real export, not a pending one.
     Confirmed with the team: the cut is a 45 degree bevel -- the triangle
     is right-isosceles, so its horizontal run always equals the step
     height. The previous .bora-slant-tr / .bora-slant-tl recipes ran
     40px across a 26px drop (~33 degrees) and were wrong; they are
     rebased below.

     One step scale serves both buttons and cards. These are the same
     three values the button already used as --btn-cut, promoted out of
     components.css so there is a single list to edit.

     The scale is responsive, like every other size token in this file:
     on phones all three collapse to the S step. A 32px bevel eats a
     serious share of a 320px-wide card, and at that width the three
     sizes stop reading as a hierarchy anyway. Because it is handled
     here, every consumer follows automatically -- buttons, plates,
     module cards, FAQ rows -- with no per-component media queries. */
  --cut-s: 16px;
  --cut-m: 16px;
  --cut-l: 16px;

  /* Default notch: width of the transparent rectangle that pushes the bevel
     away from the corner, as a share of the shape's width. Responsive for
     the same reason as the step -- a 45% notch on a phone-width card leaves
     almost no straight edge, so the plate stops reading as a plate. Shapes
     that want a plain corner chamfer (buttons, FAQ rows, benefit cards)
     override this with 0px on themselves. */
  --cut-notch: 20%;

  /* Ring thickness for outlined cut shapes, and the companion shift that
     keeps a ring the same thickness on the 45 degree bevel as on the
     straight sides. Stepping inward by --cut-border alone only yields
     border/sqrt(2) measured perpendicular to a 45 degree edge, so the
     inner contour needs an extra horizontal nudge of border*(sqrt2 - 1). */
  --cut-border: 1px;
  --cut-border-k: calc(var(--cut-border) * 0.4142);

  /* ---------- 15. Breakpoints (reference only) ---------- */
  --bp-tablet: 768px;
  --bp-desktop: 1200px;
  --bp-desktop-max: 1440px;
}

/* ==========================================================================
   TABLET -- min-width: 768px
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --text-h1: 48px;
    --text-h2: 40px;
    --text-h3: 32px;
    --text-h4: 28px;
    --h4-paragraph-spacing: 14px;
    --text-subtitle: 20px;
    --text-body: 16px;
    --text-button-l: 20px;
    --text-button-m-link: 18px;
    --text-button-s: 16px;
    --text-helper: 14px;
    --text-number-large: 64px;
    --text-number-huge: 96px;

    --section-margin: 80px;
    --padding-l1: 56px;
    --padding-l2: 24px;
    --padding-l3: 12px;
    --gap-l1: 48px;
    --gap-l2: 24px;
    --gap-l3: 12px;
    --gap-l4: 8px;

    --btn-l-padding-inline: 40px;
    --btn-l-padding-block: 24px;
    --btn-l-icon-size: 20px;
    --btn-l-icon-gap: 10px;

    --btn-m-padding-inline: 32px;
    --btn-m-padding-block: 18px;
    --btn-m-icon-size: 18px;
    --btn-m-icon-gap: 8px;

    --btn-s-padding-inline: 20px;
    --btn-s-padding-block: 14px;
    --btn-s-icon-size: 16px;
    --btn-s-icon-gap: 8px;

    --icon-category-size: 72px;

    /* full step scale returns from tablet up */
    --cut-m: 24px;
    --cut-l: 32px;
    --cut-notch: 32%;

    --grid-columns: 8;
    --grid-margin: 32px;
    --grid-gap: 24px;
    --grid-column-width: 67px;
  }
}

/* ==========================================================================
   DESKTOP -- min-width: 1200px
   ========================================================================== */
@media (min-width: 1200px) {
  :root {
    --text-h1: 64px;
    --text-h2: 56px;
    --text-h3: 40px;
    --text-h4: 32px;
    --h4-paragraph-spacing: 16px;
    --text-subtitle: 24px;
    --text-body: 18px;
    --text-button-l: 24px;
    --text-button-m-link: 20px;
    --text-button-s: 16px;
    --text-helper: 14px;
    --text-number-large: 96px;
    --text-number-huge: 160px;

    --section-margin: 120px;
    --padding-l1: 64px;
    --padding-l2: 32px;
    --padding-l3: 16px;
    --gap-l1: 56px;
    --gap-l2: 32px;
    --gap-l3: 16px;
    --gap-l4: 12px;

    --btn-l-padding-inline: 56px;
    --btn-l-padding-block: 32px;
    --btn-l-icon-size: 24px;
    --btn-l-icon-gap: 12px;

    --btn-m-padding-inline: 40px;
    --btn-m-padding-block: 24px;
    --btn-m-icon-size: 20px;
    --btn-m-icon-gap: 10px;

    --btn-s-padding-inline: 24px;
    --btn-s-padding-block: 16px;
    --btn-s-icon-size: 16px;
    --btn-s-icon-gap: 8px;

    --icon-category-size: 96px;

    --cut-notch: 45%;

    --grid-columns: 12;
    --grid-margin: 64px;
    --grid-gap: 32px;
    --grid-column-width: 80px;
  }
}

/* ==========================================================================
   Chamfer clip-path recipes -- unchanged geometry from previous version
   ========================================================================== */
.bora-chamfer-badge {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.bora-chamfer-a {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.bora-chamfer-b {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
}
.bora-chamfer-c {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.bora-chamfer-lg-a {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

/* ---------- Slant plate -- DEPRECATED, kept so existing markup keeps working.
   Use .bora-plate in components.css instead: same geometry, but the step
   size and notch position are variables, so one class covers every size
   and both directions instead of two frozen shapes.

   REBASED: these two now cut at 45 degrees (run = step height = 24px,
   notch at 45%). The previous values ran 40px across a 26px drop on -tr
   and 36px across 22px on -tl -- roughly 33 and 31 degrees, and not even
   consistent with each other. Nothing in this repo referenced them, so
   the correction is safe. ---------- */
.bora-slant-tr {
  clip-path: polygon(
    0 0,
    calc(55% - 24px) 0,
    55% 24px,
    100% 24px,
    100% 100%,
    calc(45% + 24px) 100%,
    45% calc(100% - 24px),
    0 calc(100% - 24px));
}
.bora-slant-tl {
  clip-path: polygon(
    0 24px,
    45% 24px,
    calc(45% + 24px) 0,
    100% 0,
    100% calc(100% - 24px),
    55% calc(100% - 24px),
    calc(55% - 24px) 100%,
    0 100%);
}

/* REVISION: confirmed as an 8px stripe on an 8px gap. The step was wrong
   before (1px on a 7px gap); the 135deg direction was right all along and
   is kept -- stripes run "/", parallel to the 45 degree bevel, not across
   it. Note the stripe now covers 50% of the area instead of 12.5%, so the
   same .06 alpha reads considerably denser than it used to; revisit the
   alpha if it turns out too strong in place. */
.bora-card-striped {
  --stripe-w: 8px;
  --stripe-gap: 8px;
  --stripe-angle: 135deg;
  --stripe-color: rgba(160, 192, 253, 0.06);

  background-color: var(--surface-card);
  background-image: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color) 0px var(--stripe-w),
    transparent var(--stripe-w) calc(var(--stripe-w) + var(--stripe-gap))
  );
}

/* ---------- Ground: glow + reticle grid ---------- */
.bora-ground {
  position: relative;
  background: var(--bg-gradient-one);
  background-color: var(--surface-ground);
}
.bora-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.24;
  mix-blend-mode: plus-lighter;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 45 45'%3E%3Crect y='14.7' width='30' height='.6' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='14.7' width='.6' height='30' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='14' y='10' width='2' height='10' fill='%23242424'/%3E%3Crect x='10' y='14' width='10' height='2' fill='%23242424'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 45px 45px;
}
.bora-ground > * { position: relative; z-index: 1; }

.container {
  width: 100%;
  max-width: var(--bp-desktop-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.bora-headline {
  background-image: var(--headline-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}