/* ==========================================================================
   DroneOfficial — Colors & Type
   ==========================================================================
   Self-contained foundation file. Imports from tokens.css in spirit but
   redeclares brand vars + @font-face so this file works standalone in
   any HTML preview/card. */

/* ── Brand fonts (self-hosted) ─────────────────────────────────────── */
@font-face { font-family: 'Now Display'; src: url('fonts/display/Now Display.woff2') format('woff2'), url('fonts/display/Now Display.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Now Display'; src: url('fonts/display/Now Display It.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Now Display'; src: url('fonts/display/Now Display Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Now Display'; src: url('fonts/display/Now Display Md It.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Now Display'; src: url('fonts/display/Now Display Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Now Display'; src: url('fonts/display/Now Display Bd It.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Now Text'; src: url('fonts/text/Now Text.woff2') format('woff2'), url('fonts/text/Now Text.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Now Text'; src: url('fonts/text/Now Text It.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Now Text'; src: url('fonts/text/Now Text Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Now Text'; src: url('fonts/text/Now Text Md It.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Now Text'; src: url('fonts/text/Now Text Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Now Text'; src: url('fonts/text/Now Text Bd It.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* Brand palette */
  --do-accent:           #ff4d00;
  --do-accent-hover:     #cc3d00;
  --do-accent-dark:      #661e00;
  --do-accent-darkest:   #4c1700;
  --do-accent-light:     #ff824c;
  --do-accent-lighter:   #ffdbcc;
  --do-accent-lightest:  #ffede5;

  --do-white:            #fefeff;     /* warm off-white */
  --do-black:            #0d0400;     /* warm near-black */

  --do-neutral:          #86817f;
  --do-neutral-dark:     #554f4c;
  --do-neutral-darker:   #251d19;
  --do-neutral-darkest:  #0d0400;
  --do-neutral-light:    #b6b3b2;
  --do-neutral-lighter:  #dad9d8;
  --do-neutral-lightest: #f2f2f2;

  /* Semantic foreground / surface (light-scheme defaults) */
  --fg-1:        var(--do-black);            /* primary text */
  --fg-2:        var(--do-neutral-dark);     /* body text */
  --fg-muted:    var(--do-neutral);          /* muted captions */
  --fg-inverted: var(--do-white);

  --bg-page:     var(--do-white);
  --bg-elevated: #ffffff;
  --bg-sunken:   var(--do-neutral-lightest); /* card "foreground" */

  --border-soft:   rgba(13, 4, 0, 0.10);
  --border-DEFAULT:rgba(13, 4, 0, 0.15);
  --border-strong: var(--do-neutral-lighter);

  /* Status */
  --status-success: #16a34a;
  --status-warning: #d97706;
  --status-error:   #dc2626;
  --status-info:    var(--do-accent);

  /* Type families */
  --font-display: 'Now Display', Arial, sans-serif;
  --font-body:    'Now Text', Arial, sans-serif;
  --font-mono:    'SF Mono', 'Cascadia Code', ui-monospace, monospace;

  /* Weights */
  --w-light: 300; --w-normal: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  /* Type scale */
  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-md:   1.125rem;  /* 18 */
  --t-lg:   1.25rem;   /* 20 */
  --t-xl:   1.5rem;    /* 24 */
  --t-2xl:  2rem;      /* 32 */
  --t-3xl:  2.375rem;  /* 38 */
  --t-4xl:  2.5rem;    /* 40 */
  --t-5xl:  3rem;      /* 48 */
  --t-6xl:  3.5rem;    /* 56 */

  --tracking-tight:   -0.025em;
  --tracking-tighter: -0.032em;
  --tracking-wide:     0.031em;

  --lead-none:  1;
  --lead-tight: 1.1;
  --lead-snug:  1.2;
  --lead-norm:  1.4;
  --lead-body:  1.5;

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-button: 16px; --r-full: 999px;

  /* Shadows — tinted with brand black */
  --sh-xs: 0 1px 2px rgba(13,4,0,.05);
  --sh-sm: 0 1px 3px rgba(13,4,0,.10), 0 1px 2px rgba(13,4,0,.06);
  --sh-md: 0 4px 8px -2px rgba(13,4,0,.10), 0 2px 4px -2px rgba(13,4,0,.06);
  --sh-lg: 0 12px 16px -4px rgba(13,4,0,.08), 0 4px 6px -2px rgba(13,4,0,.03);
  --sh-xl: 0 20px 24px -4px rgba(13,4,0,.08), 0 8px 8px -4px rgba(13,4,0,.03);
  --sh-2xl: 0 24px 48px -12px rgba(13,4,0,.18);

  /* Motion */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms; --d-normal: 250ms; --d-slow: 400ms;
}

/* ── Element defaults ──────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lead-norm);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-family: var(--font-display); font-size: var(--t-5xl); font-weight: var(--w-medium); line-height: var(--lead-tight); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-family: var(--font-display); font-size: var(--t-4xl); font-weight: var(--w-medium); line-height: var(--lead-tight); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: var(--w-medium); line-height: var(--lead-snug); }
h4, .h4 { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: var(--w-medium); line-height: var(--lead-snug); }
h5, .h5 { font-size: var(--t-xl); font-weight: var(--w-medium); line-height: var(--lead-snug); }
h6, .h6 { font-size: var(--t-lg); font-weight: var(--w-medium); line-height: var(--lead-norm); }

p   { line-height: var(--lead-body); text-wrap: pretty; }
.eyebrow { font-family: var(--font-body); font-size: var(--t-sm); font-weight: var(--w-medium); letter-spacing: var(--tracking-wide); text-transform: none; color: var(--fg-1); }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
::selection { background: var(--do-accent); color: var(--do-white); }
:focus-visible { outline: 2px solid var(--do-accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ── Color schemes ─────────────────────────────────────────────────── */
.cs-light, .color-scheme-1 { color: var(--do-black); background: var(--do-white); }
.cs-dark,  .color-scheme-2 { --fg-1: var(--do-white); --fg-2: var(--do-neutral-light); --fg-muted: var(--do-neutral); --bg-page: var(--do-black); --bg-sunken: var(--do-neutral-darker); --border-DEFAULT: rgba(255,255,255,.20); color: var(--do-white); background: var(--do-black); }
.cs-warm,  .color-scheme-3 { --fg-1: var(--do-white); --fg-2: var(--do-neutral-lighter); --fg-muted: var(--do-neutral-lighter); --bg-page: var(--do-neutral-dark); --bg-sunken: var(--do-neutral); --border-DEFAULT: rgba(255,255,255,.20); color: var(--do-white); background: var(--do-neutral-dark); }