/* =============================================================
   OCEAN-EXPORTS — GLOBAL DESIGN SYSTEM
   Theme: "The Bold Asymmetric (High-Contrast Blocking)"
   Brand: Red / White / Black. Red unites the light & dark halves.
   ============================================================= */

:root {
  /* ---- Core surfaces ---- */
  --surface-dark:        #121212;  /* Charcoal Black */
  --surface-light:       #FFFFFF;  /* Pure White     */

  /* ---- Text on surfaces ---- */
  --text-on-dark:        #FFFFFF;  /* Pure White  */
  --text-on-light:       #000000;  /* Jet Black   */

  /* ---- Brand accent (works on BOTH surfaces) ---- */
  --brand:               #E01A22;  /* Strong Red        */
  --brand-hover:         #B8141B;  /* darker for :hover */
  --brand-active:        #990F15;  /* pressed state     */
  --brand-tint:          rgba(224, 26, 34, 0.10); /* subtle red wash */

  /* ---- The working colours of the bright theme ----
     Red carries the brand; the other three carry meaning, never decoration:
     green = live / success, blue = focus / information, orange = pending. */
  --green:               #16A34A;
  --green-tint:          rgba(22, 163, 74, 0.12);
  --blue:                #2563EB;
  --blue-tint:           rgba(37, 99, 235, 0.14);
  --sky:                 #0EA5E9;                    /* Customer service — light blue, as India's chip */
  --sky-tint:            rgba(14, 165, 233, 0.14);
  --navy:                #1E3A8A;                    /* Documentation — dark blue */
  --navy-tint:           rgba(30, 58, 138, 0.12);
  --orange:              #E8860C;
  --orange-tint:         rgba(232, 134, 12, 0.12);

  /* ---- Muted / secondary ---- */
  --border-light:        #E0E0E0;  /* borders on light surfaces */
  --text-muted-light:    #5A5A5A;  /* secondary text on light   */
  --disabled-light:      #BDBDBD;

  /* white opacities for DARK surfaces */
  --border-dark:         rgba(255, 255, 255, 0.14);
  --text-muted-dark:     rgba(255, 255, 255, 0.65);
  --disabled-dark:       rgba(255, 255, 255, 0.35);

  /* ---- Split-screen ratio (asymmetry) ---- */
  --split-dark:          40%;
  --split-light:         60%;

  /* ---- Shape & type ---- */
  --radius:              4px;   /* sharp, minimal — flat modern look */
  --radius-sm:           2px;
  --font-sans:           "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --weight-regular:      400;
  --weight-medium:       600;
  --weight-bold:         800;
}

/* =============================================================
   BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute always wins — no display rule may resurrect a node. */
[hidden] { display: none !important; }

/* ---- Scrollbars: thin, red, everywhere ---- */
* { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--brand); border-radius: 999px;
  border: 1px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  color: var(--text-on-light);
  background: var(--surface-light);
  -webkit-font-smoothing: antialiased;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Surface helpers — flip text colour automatically */
.surface-dark  { background: var(--surface-dark);  color: var(--text-on-dark);  }
.surface-light { background: var(--surface-light); color: var(--text-on-light); }
.surface-dark  .muted { color: var(--text-muted-dark);  }
.surface-light .muted { color: var(--text-muted-light); }

/* =============================================================
   ASYMMETRIC SPLIT LAYOUT (40% dark / 60% light)
   ============================================================= */
.split-screen {
  display: grid;
  grid-template-columns: var(--split-dark) var(--split-light);
  min-height: 100vh;
}
.split-screen__dark  { background: var(--surface-dark);  color: var(--text-on-dark);  }
.split-screen__light { background: var(--surface-light); color: var(--text-on-light); }
@media (max-width: 768px) { .split-screen { grid-template-columns: 1fr; } }

/* =============================================================
   TYPOGRAPHY — hierarchy via WEIGHT, not colour
   ============================================================= */
h1, h2, h3 { font-weight: var(--weight-bold); letter-spacing: -0.01em; margin: 0 0 .4em; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.5rem;  }
h3 { font-size: 1.125rem; }
.subtitle { font-weight: var(--weight-regular); opacity: .85; }

/* =============================================================
   BUTTONS — sharp, flat, brand red, no heavy shadows
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1.1rem;
  font-family: inherit; font-weight: var(--weight-medium); font-size: .85rem;
  border: none; border-radius: var(--radius); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--brand); color: #FFFFFF; }
.btn--primary:hover  { background: var(--brand-hover); }
.btn--primary:active { background: var(--brand-active); }
.btn--primary:disabled { background: var(--disabled-light); cursor: not-allowed; }

.surface-light .btn--secondary { background: transparent; color: var(--text-on-light); border: 1px solid var(--border-light); }
.surface-dark  .btn--secondary { background: transparent; color: var(--text-on-dark);  border: 1px solid var(--border-dark); }
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }

/* =============================================================
   FORM CONTROLS — flat, red focus ring
   ============================================================= */
.field {
  width: 100%; padding: .55rem .75rem;
  font-family: inherit; font-size: .85rem;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--surface-light); color: var(--text-on-light); outline: none;
}
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.surface-dark .field { background: rgba(255,255,255,0.04); border-color: var(--border-dark); color: var(--text-on-dark); }

/* =============================================================
   ACCENTS
   ============================================================= */
.accent-red         { color: var(--brand); }
.accent-bar         { height: 4px; background: var(--brand); border: 0; } /* the "seam" divider */
.active, .is-active { color: var(--brand); font-weight: var(--weight-bold); }