/* ============================================================
   ORIT Technologies — Design Tokens
   Colors, type, spacing, radius, shadow, motion
   ============================================================ */

/* --- Webfonts ---------------------------------------------- */
/* SF Pro is Apple-proprietary and cannot be redistributed. We
   resolve to system SF on Apple platforms via system-ui /
   -apple-system, and substitute Inter (Google Fonts) elsewhere.
   Inter is loaded by the consuming HTML page; do not import here. */

:root {
  /* ============================================================
     COLOR TOKENS
     ============================================================ */

  /* --- Brand & Accent (single accent system) --- */
  --orit-blue:              #0066cc;  /* Action / primary CTA / links */
  --orit-blue-focus:        #0071e3;  /* Keyboard focus ring */
  --orit-blue-on-dark:      #2997ff;  /* Inline links on dark surfaces */

  /* --- Ink (text on light) --- */
  --ink:                    #1d1d1f;  /* Default near-black for all body + headlines */
  --ink-80:                 #333333;  /* Body on pearl surfaces */
  --ink-48:                 #7a7a7a;  /* Disabled, fine print */

  /* --- On-dark text --- */
  --on-dark:                #ffffff;
  --on-dark-muted:          #cccccc;  /* Secondary copy on dark tiles */

  /* --- Surfaces (light) --- */
  --canvas:                 #ffffff;  /* Default page canvas */
  --canvas-parchment:       #f5f5f7;  /* Off-white tile + footer */
  --surface-pearl:          #fafafc;  /* Ghost-button fill on parchment */

  /* --- Surfaces (dark) --- */
  --surface-tile-1:         #272729;  /* Primary dark tile */
  --surface-tile-2:         #2a2a2c;  /* Lighter dark tile (rhythm) */
  --surface-tile-3:         #252527;  /* Deeper dark tile (video frames) */
  --surface-black:          #000000;  /* Global nav, true void */

  /* --- Translucent / Chrome --- */
  --chip-translucent:       rgba(210, 210, 215, 0.64);
  --hairline:               #e0e0e0;  /* 1px borders on cards/chips */
  --divider-soft:           #f0f0f0;  /* Soft ring on ghost buttons */
  --hairline-alpha:         rgba(0, 0, 0, 0.08);

  /* --- Operational status (ORIT addition — for dashboards) --- */
  /* These are NOT general accents — reserved for operational
     state indicators only (online/warning/critical/idle). They
     never appear in marketing surfaces. */
  --status-online:          #1f8a5b;  /* Green — healthy, online, active */
  --status-warning:         #d97706;  /* Amber — attention, degraded */
  --status-critical:        #c8372d;  /* Red — fault, offline, critical */
  --status-idle:            #7a7a7a;  /* Gray — idle, paused, unknown */

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Font stacks. The first entry is the real SF Pro on Apple
     platforms; the fallback chain lands on Inter (Google Fonts)
     for cross-platform parity. */
  --font-display: "SF Pro Display", system-ui, -apple-system, "Inter", "Segoe UI", sans-serif;
  --font-text:    "SF Pro Text",    system-ui, -apple-system, "Inter", "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale (token name → px) */
  --fs-hero:         56px;
  --fs-display-lg:   40px;
  --fs-display-md:   34px;
  --fs-lead:         28px;
  --fs-lead-airy:    24px;
  --fs-tagline:      21px;
  --fs-body:         17px;
  --fs-caption:      14px;
  --fs-fine:         12px;
  --fs-micro:        10px;

  /* Weights — note: 500 is deliberately absent */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     SPACING (8px base)
     ============================================================ */
  --space-xxs:    4px;
  --space-xs:     8px;
  --space-sm:    12px;
  --space-md:    17px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;
  --space-section: 80px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-none:  0px;
  --r-xs:    5px;
  --r-sm:    8px;
  --r-md:    11px;
  --r-lg:    18px;
  --r-pill:  9999px;
  --r-full:  9999px;

  /* ============================================================
     ELEVATION
     The ONLY drop-shadow in the system. Reserved for product
     photography resting on a surface — never on cards, buttons,
     or text. Cards rely on hairline borders + surface change.
     ============================================================ */
  --shadow-product: 3px 5px 30px 0 rgba(0, 0, 0, 0.22);

  /* Backdrop blur recipe for sticky bars / sub-nav. */
  --backdrop-frosted: saturate(180%) blur(20px);

  /* ============================================================
     MOTION
     System-wide micro-interaction: scale(0.95) on active press,
     short transitions, no bouncy easing.
     ============================================================ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      150ms;
  --dur-base:      250ms;
  --press-scale:   0.95;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-content:   980px;   /* Text-heavy sections */
  --max-grid:      1440px;  /* Product grids, store, dashboard */
  --nav-h:         44px;
  --subnav-h:      52px;
  --touch-min:     44px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these in HTML rather than inlining font properties.
   ============================================================ */

.orit-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: 1.07;
  letter-spacing: -0.28px;
  color: var(--ink);
}

.orit-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.10;
  letter-spacing: 0;
  color: var(--ink);
}

.orit-display-md {
  font-family: var(--font-text);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-semibold);
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
}

.orit-lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.14;
  letter-spacing: 0.196px;
  color: var(--ink);
}

.orit-lead-airy {
  font-family: var(--font-text);
  font-size: var(--fs-lead-airy);
  font-weight: var(--fw-light);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
}

.orit-tagline {
  font-family: var(--font-display);
  font-size: var(--fs-tagline);
  font-weight: var(--fw-semibold);
  line-height: 1.19;
  letter-spacing: 0.231px;
  color: var(--ink);
}

.orit-body-strong {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.24;
  letter-spacing: -0.374px;
  color: var(--ink);
}

.orit-body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
}

.orit-caption {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: 1.43;
  letter-spacing: -0.224px;
  color: var(--ink);
}

.orit-caption-strong {
  font-family: var(--font-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.29;
  letter-spacing: -0.224px;
  color: var(--ink);
}

.orit-fine {
  font-family: var(--font-text);
  font-size: var(--fs-fine);
  font-weight: var(--fw-regular);
  line-height: 1.0;
  letter-spacing: -0.12px;
  color: var(--ink-48);
}

.orit-micro {
  font-family: var(--font-text);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  letter-spacing: -0.08px;
  color: var(--ink-48);
}

.orit-nav-link {
  font-family: var(--font-text);
  font-size: var(--fs-fine);
  font-weight: var(--fw-regular);
  line-height: 1.0;
  letter-spacing: -0.12px;
}

/* Dark surface text inversions */
.on-dark .orit-hero,
.on-dark .orit-display-lg,
.on-dark .orit-display-md,
.on-dark .orit-lead,
.on-dark .orit-lead-airy,
.on-dark .orit-tagline,
.on-dark .orit-body-strong,
.on-dark .orit-body,
.on-dark .orit-caption,
.on-dark .orit-caption-strong { color: var(--on-dark); }
.on-dark .orit-fine,
.on-dark .orit-micro { color: var(--on-dark-muted); }