/* ============================================================
   Notable brand override — Tide direction.
   Loaded AFTER te-doc.css. Remaps the shared document system
   onto Notable's own palette and body face.
   Tokens per assets/tokens/notable-tokens.css.
   ============================================================ */

@font-face { font-family:'Hanken Grotesk'; font-weight:400; font-display:swap;
  src:url('./fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:500; font-display:swap;
  src:url('./fonts/hanken-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-weight:600; font-display:swap;
  src:url('./fonts/hanken-grotesk-600.woff2') format('woff2'); }

:root {
  /* Core remap: forest block -> Notable block, royal accent -> Notable accent */
  --forest:      #0B3B4A;
  --forest-700:  #072B37;
  --forest-600:  #0A3543;
  --forest-500:  #0B3B4A;
  --forest-450:  #12556A;
  --forest-400:  #17697F;
  --forest-300:  #3E97AC;

  --royal:       #0E7490;
  --royal-700:   #094A5D;
  --royal-600:   #0B5A70;
  --royal-500:   #0E7490;
  --royal-400:   #3D96AE;
  --royal-300:   #7FBDCE;

  --navy:        #0D1712;   /* headings */
  --sky:         #7FD8EC;   /* block-only accent */
  --sky-200:     #BDEAF6;
  --sky-300:     #7FD8EC;
  --sky-400:     #4FC2DE;

  --green:       #1B7A4A;
  --success:     #1B7A4A;
  --warning:     #8A6414;
  --danger:      #C0392B;
  --info:        #0E7490;

  --charcoal:    #2B332D;
  --grey:        #5C6960;
  --grey-700:    #2B332D;
  --grey-500:    #5C6960;
  --grey-400:    #6B776F;

  --paper-50:    #FBFCFA;
  --paper-100:   #F3F7F4;
  --line-100:    #EEF3EF;
  --line-200:    #E4EAE5;
  --line-300:    #D2DAD3;
  --ink-900:     #0D1712;

  --pale-green:  #E6F5F9;   /* accent tint */
  --pale-blue:   #E6F5F9;

  --on-dark-line: rgba(127,216,236,0.22);
}

/* Body face: Hanken Grotesk per the Notable spec. Manrope stays for display. */
body, p, li, td, .note, .callout { font-family:'Hanken Grotesk', system-ui, sans-serif; }

/* Hero + footer blocks rebuilt on the Notable block colour */
.hero {
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(127,216,236,0.20), rgba(11,59,74,0) 55%),
    radial-gradient(120% 130% at 0% 120%, rgba(7,43,55,0.60), rgba(11,59,74,0) 60%),
    linear-gradient(135deg, #0B3B4A 0%, #0A3543 60%, #072B37 100%);
}
.hero::after, .footer::after {
  background-image:radial-gradient(circle, rgba(127,216,236,0.28) 1.1px, transparent 1.1px);
}
.footer {
  background:
    radial-gradient(120% 160% at 90% 0%, rgba(127,216,236,0.16), rgba(11,59,74,0) 55%),
    linear-gradient(135deg, #0B3B4A 0%, #072B37 100%);
}

/* Notable lockup in the hero */
.nt-lockup { height:30px; width:auto; display:block; margin:0 0 18px; }

/* Status pills recoloured onto the Notable scale */
.s-done  { background:#E6F2EA; color:#1B7A4A; border-color:#C5E2D2; }
.s-ben   { background:#E6F5F9; color:#0B5A70; border-color:#C4E6F0; }
.s-nico  { background:#FBF2DF; color:#8A6414; border-color:#EFDFBC; }
.s-block { background:#FBECEA; color:#C0392B; border-color:#F2CFCA; }

/* Key-value tables onto the Notable line colours */
.keyval td { border-bottom-color:#E4EAE5; }
.keyval td:first-child { color:#5C6960; }
.keyval tr:hover td { background:#FBFCFA; }

code {
  font-family:'JetBrains Mono', monospace; font-size:0.88em;
  background:#F3F7F4; border:1px solid #E4EAE5; border-radius:5px;
  padding:1px 5px; color:#0B3B4A;
}
.callout code, .hero code { background:rgba(255,255,255,0.14); border-color:transparent; color:inherit; }