/* Brainly Design System — Colors & Type
 * Dark-themed interpretation using Brainly's native palette.
 * Source: brainly/style-guide @ master (src/sass/_colors.scss, _config.scss)
 */

/* ---------- Fonts ---------- */
/* Brand-supplied Figtree files + Barlow Semi Condensed for display utility */
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree_Regular_Font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree_SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree_Bold_Font.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/Figtree_Black_Font.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('fonts/Barlow_Semi_Condensed_Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =============================================================
   * RAW PALETTE — from src/sass/_colors.scss
   * ============================================================= */
  --black: #000000;
  --white: #ffffff;

  --indigo-70: #0c114d;
  --indigo-60: #133191;
  --indigo-50: #163bf3;  /* PRIMARY BRAND */
  --indigo-40: #6d83f3;
  --indigo-30: #bdc7fb;
  --indigo-20: #ebeeff;
  --indigo-10: #f2f4ff;

  --blue-70: #002238;  --blue-60: #014a82;  --blue-50: #0089e3;
  --blue-40: #4fb3f6;  --blue-30: #b9e2fe;  --blue-20: #d9f0ff;  --blue-10: #edf8ff;

  --green-70: #002e13; --green-60: #00672e; --green-50: #24a865;
  --green-40: #60d399; --green-30: #9ce8c2; --green-20: #e3f7ed; --green-10: #f0faf5;

  --red-70: #8d1a00;   --red-60: #cf1d00;   --red-50: #ff341a;
  --red-40: #ff7968;   --red-30: #ffc7bf;   --red-20: #ffe8e5;   --red-10: #fff1f0;

  --yellow-70: #5b3100; --yellow-60: #935000; --yellow-50: #c98600;
  --yellow-40: #fbbe2e; --yellow-30: #fedd8e; --yellow-20: #fff3d6; --yellow-10: #fffaf0;

  --gray-70: #323c45;  --gray-60: #46535f;  --gray-50: #687b8c;
  --gray-40: #c3d1dd;  --gray-30: #e1eaf1;  --gray-20: #ebf2f7;  --gray-10: #f5f8fa;

  /* =============================================================
   * DARK-THEME SEMANTICS
   * Optimized for clarity and minimalism per brand guidance.
   * ============================================================= */

  /* Surfaces — deep indigo-tinted neutrals */
  --bg-0:       #07081a;    /* page background, deepest */
  --bg-1:       #0e1030;    /* raised surface */
  --bg-2:       #161a3e;    /* card */
  --bg-3:       #1f2450;    /* hover surface / input */
  --bg-4:       #2a3066;    /* pressed surface */
  --bg-overlay: rgba(7, 8, 26, 0.72);

  /* Brand */
  --brand:           var(--indigo-50);
  --brand-hover:     #2d50f5;
  --brand-pressed:   #4163f7;
  --brand-soft:      rgba(22, 59, 243, 0.14);
  --brand-muted:     rgba(22, 59, 243, 0.28);
  --brand-on-dark:   var(--indigo-40);  /* for text on dark bg */

  /* Foreground (text/icon) */
  --fg-0: #ffffff;                      /* strongest — headlines */
  --fg-1: rgba(255, 255, 255, 0.92);    /* body */
  --fg-2: rgba(255, 255, 255, 0.68);    /* secondary */
  --fg-3: rgba(255, 255, 255, 0.48);    /* tertiary / placeholder */
  --fg-4: rgba(255, 255, 255, 0.28);    /* disabled */
  --fg-inverse: #07081a;                /* text on light surfaces */

  /* Borders */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --border-brand:   var(--indigo-40);

  /* Semantic */
  --success:     var(--green-40);
  --success-bg:  rgba(96, 211, 153, 0.14);
  --danger:      var(--red-40);
  --danger-bg:   rgba(255, 121, 104, 0.14);
  --warning:     var(--yellow-40);
  --warning-bg:  rgba(251, 190, 46, 0.14);
  --info:        var(--blue-40);
  --info-bg:     rgba(79, 179, 246, 0.14);

  /* Focus */
  --focus-ring:       var(--indigo-40);
  --focus-ring-outer: rgba(109, 131, 243, 0.32);

  /* =============================================================
   * TYPOGRAPHY
   * ============================================================= */
  --font-primary: 'Figtree', Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Semi Condensed', 'Figtree', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
  --font-feature: 'ss01' 1; /* single-storey 'a' */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Type scale (Brainly $fontSizes, rem → px @ 16) */
  --fs-xsmall:     0.625rem;  /* 10 */
  --fs-obscure:    0.75rem;   /* 12 */
  --fs-small:      0.875rem;  /* 14 */
  --fs-medium:     0.9375rem; /* 15 */
  --fs-default:    1rem;      /* 16 */
  --fs-standout:   1.125rem;  /* 18 */
  --fs-subheadline:1.25rem;   /* 20 */
  --fs-headline:   1.5rem;    /* 24 */
  --fs-subheader:  2.75rem;   /* 44 */
  --fs-header:     3rem;      /* 48 */
  --fs-large:      3.625rem;  /* 58 */
  --fs-xlarge:     4.5rem;    /* 72 */
  --fs-xxlarge:    5rem;      /* 80 */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* =============================================================
   * SPACING — Brainly $sizesSetup
   * ============================================================= */
  --space-none: 0;
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-s:    16px;
  --space-m:    24px;
  --space-l:    40px;
  --space-xl:   64px;
  --space-xxl:  104px;
  --space-xxxl: 168px;
  --space-xxxxl:272px;

  /* =============================================================
   * RADII — Brainly $borderRadius*
   * ============================================================= */
  --r-none: 0;
  --r-xxxs: 4px;
  --r-xxs:  6px;
  --r-xs:   8px;    /* default */
  --r-s:    12px;
  --r-m:    16px;
  --r-l:    24px;
  --r-xl:   32px;
  --r-xxl:  40px;
  --r-pill: 999px;

  /* =============================================================
   * ELEVATION — recomposed for dark theme
   * ============================================================= */
  --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px 0 rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 8px 32px 0 rgba(0, 0, 0, 0.56);
  --shadow-brand-glow: 0 0 0 1px rgba(109, 131, 243, 0.24), 0 12px 40px -8px rgba(22, 59, 243, 0.45);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* =============================================================
   * MOTION — from Brainly $easing* / $duration*
   * ============================================================= */
  --dur-instant:    0ms;
  --dur-quick-1:    80ms;
  --dur-quick-2:    120ms;
  --dur-moderate-1: 180ms;
  --dur-moderate-2: 260ms;
  --dur-gentle-1:   320ms;
  --dur-gentle-2:   400ms;

  --ease-regular: cubic-bezier(0.35, 0, 0.1, 1);
  --ease-entry:   cubic-bezier(0.1, 0, 0, 1);
  --ease-exit:    cubic-bezier(0.3, 0, 1, 0.8);

  --press-scale: 0.96;

  /* =============================================================
   * LAYOUT
   * ============================================================= */
  --layout-max: 1400px;
  --layout-pad: 24px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Component sizes */
  --size-xxs: 16px; --size-xs: 24px; --size-s: 32px;
  --size-m: 40px;  --size-l: 56px;   --size-xl: 80px;  --size-xxl: 104px;
}

/* =============================================================
 * SEMANTIC TYPE ELEMENTS — map $fontSizes onto HTML tags
 * ============================================================= */
html { font-size: 16px; }
body {
  font-family: var(--font-primary);
  font-feature-settings: var(--font-feature);
  font-size: var(--fs-default);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h-display {
  font-size: var(--fs-xlarge);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0;
}
h2, .h-header {
  font-size: var(--fs-header);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-0);
  margin: 0;
}
h3, .h-subheader {
  font-size: var(--fs-subheader);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-0);
  margin: 0;
}
h4, .h-headline {
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-0);
  margin: 0;
}
h5, .h-subheadline {
  font-size: var(--fs-subheadline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-0);
  margin: 0;
}
h6, .h-standout {
  font-size: var(--fs-standout);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--fg-0);
  margin: 0;
}

p, .t-body {
  font-size: var(--fs-default);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}
.t-small  { font-size: var(--fs-small);   color: var(--fg-2); }
.t-obscure{ font-size: var(--fs-obscure); color: var(--fg-3); letter-spacing: 0.02em; }
.t-caption{ font-size: var(--fs-obscure); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: var(--fw-semibold); }

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-3);
  color: var(--brand-on-dark);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xxs);
}

a {
  color: var(--brand-on-dark);
  text-decoration: none;
  transition: color var(--dur-quick-2) var(--ease-regular);
}
a:hover { color: var(--indigo-30); }

::selection { background: var(--brand-muted); color: var(--fg-0); }

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