/* ==========================================================================
   SharkNinja Translation Hub design system (entry file).

   This file holds the design tokens (colour, type, space, radius, shadow) and
   pulls in the partials below. Every colour, size and radius in the partials
   comes from a token here, so a change here reaches every screen.

   Layers, in order:
     base      reset, type, links, focus, utilities
     layout    app shell, sidebar, page header, grids, rows
     brand     SharkNinja lockup (sidebar, sign-in)
     forms     field, input, select, textarea, checkbox, button (one size scale)
     controls  segmented toggle, locale pills, tabs, badges, chips
     surfaces  card, panel, notice, table, KPI, empty state
     workbench Translate screen, panes, checks, packaging line breaks

   Brand rules (SharkNinja Master Corporate Brand Guidelines V5):
   Teal #00a5af is the accent. Corporate palette is black, white and silver.
   Gotham for type, Proxima Nova as fallback. No sharp gradients.
   Strict CSP: same-origin files only, no inline styles, no external fonts.
   ========================================================================== */

@import url("/static/css/base.css");
@import url("/static/css/layout.css");
@import url("/static/css/brand.css");
@import url("/static/css/forms.css");
@import url("/static/css/controls.css");
@import url("/static/css/surfaces.css");
@import url("/static/css/workbench.css");
@import url("/static/css/screens.css");

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "New Rocker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/new-rocker-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Serif Ethiopic";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/noto-serif-ethiopic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Serif Ethiopic";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/noto-serif-ethiopic.woff2") format("woff2");
  unicode-range: U+1200-137F, U+1380-139F, U+2D80-2DDF, U+AB00-AB2F;
}

:root {
  /* ---- SharkNinja corporate palette ---------------------------------- */
  --teal:             #00a5af;
  --black:            #000000;
  --white:            #ffffff;
  --silver:           #bbbdc0;
  --silver-light:     #f1f3f5;

  /* ---- Teal ramp (interactive and action) ---------------------------- */
  --teal-25:          #f4fbfb;
  --teal-50:          #e6f7f8;
  --teal-100:         #c2edf0;
  --teal-200:         #99dfe4;
  --teal-300:         #47c2cb;
  --teal-400:         #1ab4bf;
  --teal-500:         #00a5af;
  --teal-600:         #008c95;
  --teal-700:         #00747c;   /* 5.4:1 on white */
  --teal-800:         #005b62;
  --teal-900:         #003e43;

  /* ---- Neutrals ------------------------------------------------------ */
  --slate-25:         #fcfdfe;
  --slate-50:         #f8fafc;
  --slate-100:        #f1f5f9;
  --slate-200:        #e2e8f0;
  --slate-300:        #cbd5e1;
  --slate-400:        #94a3b8;
  --slate-500:        #64748b;
  --slate-600:        #475569;
  --slate-700:        #334155;
  --slate-800:        #1e293b;
  --slate-900:        #0f172a;

  /* ---- Status signals (functional colour only) ----------------------- */
  --status-ready:     #10b981;
  --status-ready-bg:  #ecfdf5;
  --status-ready-bdr: #a7f3d0;
  --status-ready-txt: #065f46;
  --status-review:    #f59e0b;
  --status-review-bg: #fffbeb;
  --status-review-bdr:#fde68a;
  --status-review-txt:#92400e;
  --status-alert:     #ef4444;
  --status-alert-bg:  #fef2f2;
  --status-alert-bdr: #fecaca;
  --status-alert-txt: #991b1b;

  /* ---- Semantic tokens: light theme ---------------------------------- */
  --bg-app:           var(--slate-50);
  --bg-surface:       #ffffff;
  --bg-surface-alt:   var(--slate-50);
  --bg-surface-hover: var(--slate-100);
  --bg-sidebar:       #ffffff;
  --bg-card:          #ffffff;
  --border-subtle:    var(--slate-100);
  --border-default:   var(--slate-200);
  --border-strong:    var(--slate-300);
  --border-focus:     var(--teal-500);

  --text-main:        var(--slate-900);
  --text-sub:         var(--slate-600);
  --text-muted:       var(--slate-500);
  --text-accent:      var(--teal-700);

  --btn-primary-bg:   var(--teal-700);
  --btn-primary-hvr:  var(--teal-800);
  --btn-primary-txt:  #ffffff;

    --shark-500:        #0066cc;
  --ninja-50:         #f5f3ff;
  --ninja-100:        #ddd6fe;
  --ninja-300:        #c4b5fd;
  --ninja-500:        #8b5cf6;
  --ninja-600:        #7c3aed;
  --ninja-700:        #5b21b6;

  /* ---- Catalyst brand gradients (catalyst-brand-guide.html) --------- */
  --grad-catalyst:    linear-gradient(135deg, #00a5af 0%, #0066cc 55%, #7c3aed 100%);
  --grad-catalyst-h:  linear-gradient(135deg, #1ab4bf 0%, #1a75d2 55%, #8b5cf6 100%);
  --grad-aurora-soft: linear-gradient(135deg, rgba(0, 165, 175, 0.08) 0%, rgba(0, 102, 204, 0.05) 50%, rgba(230, 51, 18, 0.03) 100%);
  --grad-glow-teal:   radial-gradient(circle at 50% 0%, rgba(0, 165, 175, 0.15) 0%, transparent 70%);
  --grad-shark:       linear-gradient(135deg, #0066cc 0%, #00a5af 100%);
  --grad-ninja:       linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%);
  --grad-border:      linear-gradient(135deg, rgba(0, 165, 175, 0.35) 0%, rgba(0, 102, 204, 0.25) 50%, rgba(124, 58, 237, 0.2) 100%);

  /* ---- Elevation ----------------------------------------------------- */
  --shadow-xs:        0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:        0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md:        0 4px 14px -2px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg:        0 14px 32px -4px rgba(15, 23, 42, 0.10), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
    --shadow-focus:     0 0 0 3px rgba(0, 165, 175, 0.25);
  --shadow-glow:      0 0 20px rgba(0, 165, 175, 0.18);
  --shadow-card-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);

  /* ---- Type: Gotham first, Proxima Nova next, bundled font last ------ */
  --font-sans:        "Gotham", "Proxima Nova", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans CJK JP", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Noto Sans Thai", sans-serif;
  --font-display:     "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:        "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --font-catalyst:    "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-xs:            0.72rem;
  --fs-sm:            0.8rem;
  --fs-md:            0.9rem;
  --fs-lg:            1.05rem;
  --fs-xl:            1.4rem;

  /* ---- Space scale (use these for every gap and padding) ------------- */
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             24px;
  --sp-6:             32px;

  /* ---- Control sizes (one height for every input, select and button) - */
  --control-h:        38px;
  --control-h-sm:     30px;

  /* ---- Radii and easing ---------------------------------------------- */
  --r-xs:             4px;
  --r-sm:             6px;
  --r-md:             8px;
  --r-lg:             12px;
  --r-xl:             16px;
  --r-pill:           9999px;
  --ease:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:         cubic-bezier(0.2, 0, 0, 1);

  --sidebar-w:        232px;
}

/* ---- Dark theme --------------------------------------------------------- */
[data-theme="dark"] {
  --bg-app:           #090d16;
  --bg-surface:       #0f1523;
  --bg-surface-alt:   #151c2d;
  --bg-surface-hover: #1a2338;
  --bg-sidebar:       #0c111c;
  --bg-card:          #0f1523;
  --border-subtle:    rgba(255, 255, 255, 0.06);
  --border-default:   rgba(255, 255, 255, 0.11);
  --border-strong:    rgba(255, 255, 255, 0.20);
  --border-focus:     var(--teal-400);

  --text-main:        #f1f5f9;
  --text-sub:         #94a3b8;
  --text-muted:       #94a3b8;
  --text-accent:      var(--teal-300);

  --btn-primary-bg:   var(--teal-500);
  --btn-primary-hvr:  var(--teal-400);
  --btn-primary-txt:  #090d16;

  --status-ready-bg:  rgba(16, 185, 129, 0.15);
  --status-ready-bdr: rgba(16, 185, 129, 0.35);
  --status-ready-txt: #34d399;
  --status-review-bg: rgba(245, 158, 11, 0.15);
  --status-review-bdr:rgba(245, 158, 11, 0.35);
  --status-review-txt:#fbbf24;
  --status-alert-bg:  rgba(239, 68, 68, 0.15);
  --status-alert-bdr: rgba(239, 68, 68, 0.35);
  --status-alert-txt: #f87171;

  --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:        0 6px 18px rgba(0, 0, 0, 0.6);
  --shadow-lg:        0 16px 36px rgba(0, 0, 0, 0.7);
  --shadow-focus:     0 0 0 3px rgba(0, 165, 175, 0.35);
}