/* ========================================================================
   Abucear skin for the Tools for Divers design system
   Scope: the abucear/classes web app (ABU-23). Staff workspace, public
   course cards and mobile intake that are framed inside abucear.mx.
   ------------------------------------------------------------------------
   Status: approved for launch (ABU-24, 2026-10-12). Light mode only.
   Component styles live in app.css and use only these roles and tokens.

   Structure follows TFD (skills/tfd-design/tokens/tokens.css): one skin
   prefix with bg / bg-secondary / bg-tertiary / text / text-secondary /
   text-tertiary / border roles. TFD spacing, radii, touch targets and the
   type scale are copied below WITHOUT CHANGES. Edit those upstream (DFUI,
   then tokens.css), never here.
   Identity comes from domains/abucear/Documentation/brand/BRAND_BOOK.md §8.
   No Slate, Dalton, DiveShopOS or TFD-umbrella colours appear here.

   Naming: this file follows the brand book's own words. `--abucear-brand`
   (Abucear Blue) does what TFD's `--<skin>-accent` does: interactive
   colour and anchor. `--abucear-accent` is Dive Amber, the brand book's
   "accent", and is NEVER interactive or a status colour.

   ------------------------------------------------------------------------
   WCAG 2.2 contrast (relative luminance, sRGB). AA = 4.5 body text,
   3.0 large text (>=24px, or >=18.66px bold) and UI boundaries/indicators.

   Text pairs
     Ink #111827 on Ocean Mist #F0F9FF ............ 16.64  AA/AAA
     Ink on White #FFFFFF ........................ 17.74  AA/AAA
     Ink on Shallow Sky #E0F2FE .................. 15.46  AA/AAA
     Deep Slate #1F2937 on Ocean Mist ............. 13.77  AA/AAA
     Secondary #475569 on Mist / White / Sky ...... 7.11 / 7.58 / 6.60
     Tertiary #5B6779 on Mist / White / Sky ....... 5.38 / 5.74 / 5.00
     White on Abucear Blue #1E4E9D ................ 7.98  AA/AAA
     Abucear Blue on White / Mist / Sky (links) ... 7.98 / 7.49 / 6.95
     White on Blue hover #173D7B .................. 10.55
     Ink on Dive Amber #FBBF24 .................... 10.63
     Dive Amber on Abucear Blue ................... 4.78  (short emphasis only)
     Slate Mist #CBD5E1 on Abucear Blue ........... 5.37
     Success #166534 on #F0FDF4 / White ........... 6.81 / 7.13
     Warning #92400E on #FFFBEB / White ........... 6.84 / 7.09
     Danger  #B91C1C on #FEF2F2 / White ........... 5.91 / 6.47
     Info    #1E4E9D on Shallow Sky ............... 6.95
     Secondary #475569 on success/warn/danger fills 7.24 / 7.31 / 6.93

   Non-text (1.4.11, need 3.0)
     Control border #64748B on White / Mist / Sky . 4.76 / 4.46 / 4.15
     Focus ring Abucear Blue on White / Mist / Sky  7.98 / 7.49 / 6.95
     Focus ring Dive Amber on Abucear Blue ........ 4.78
     State borders = state text colours ........... >= 5.91

   FAILING pairs, therefore forbidden
     Dive Amber on White ......................... 1.67  (text or indicator)
     White on Dive Amber ......................... 1.67  (brand book agrees)
     Slate Mist #CBD5E1 on White ................. 1.48  (decorative lines only)
     Abucear Blue on Ink (dark surfaces) .......... 2.22
     #64748B as text on Mist / Sky ............... 4.46 / 4.15 (why tertiary
                                                    is #5B6779, see below)
   ======================================================================== */

/* ---------- Fonts ------------------------------------------------------
   Montserrat (headings) and Poppins (body/UI): both SIL OFL 1.1, free to
   self-host and embed; ship OFL.txt beside the files.

   Loading constraint (internal/web/server.go): the CSP is
   `default-src 'self'` with no font-src, so the Google Fonts CDN that
   abucear.mx uses would be blocked. The latin WOFF2 subsets are
   self-hosted in /static/fonts/ with their OFL texts (TFD's own
   "self-host, no gfonts CDN" rule). Montserrat is one variable file
   (wght 600–700); Poppins Regular 400 and SemiBold 600 are two files.
   No italics. The server appends content hashes to these URLs.
   Framed public pages load them from the classes origin, which 'self'
   already allows.

   Brand book §8: no third family. TFD's JetBrains Mono readout rule is
   NOT applied in this skin; numbers use Poppins with tabular-nums.
   Unverified: whether the chosen Poppins build exposes `tnum`. If it does
   not, digits stay proportional; do not add a mono family to fix it.
   Poppins is wider than system-ui, so expect some reflow on swap.
   --------------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat-latin-wght.woff2?v=6438d7b8ea9c7c39") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-Regular-latin.woff2?v=3dc5d0c52428fe16") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-SemiBold-latin.woff2?v=872e862918591a9e") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Light only. Keeps native form controls, scrollbars and date pickers
     light inside the frame too. */
  color-scheme: light;

  /* ---------- Brand palette (brand book §8, literal values) ---------- */
  --abucear-blue:          #1E4E9D;  /* Abucear Blue */
  --abucear-amber:         #FBBF24;  /* Dive Amber */
  --abucear-deep-slate:    #1F2937;  /* Deep Slate */
  --abucear-ink:           #111827;  /* Ink */
  --abucear-ocean-mist:    #F0F9FF;  /* Ocean Mist */
  --abucear-shallow-sky:   #E0F2FE;  /* Shallow Sky */
  --abucear-slate-mist:    #CBD5E1;  /* Slate Mist */
  --abucear-night:         #030712;  /* Night */
  --abucear-white:         #FFFFFF;

  /* ---------- Skin roles in TFD form ---------- */
  --abucear-bg:            var(--abucear-ocean-mist);  /* page */
  --abucear-bg-secondary:  var(--abucear-white);       /* surface: cards, tables, forms */
  --abucear-bg-tertiary:   var(--abucear-shallow-sky); /* raised/supporting panel, selected row, hover */
  --abucear-text:          var(--abucear-ink);         /* body and headings */
  --abucear-text-secondary:#475569;  /* meta, help text. Extends the site's slate family */
  --abucear-text-tertiary: #5B6779;  /* timestamps, placeholders. Derived: slate-500 fails AA on Sky */
  --abucear-border:        var(--abucear-slate-mist);  /* decorative dividers only (1.48 on white) */
  --abucear-border-strong: #64748B;  /* inputs, selects, checkboxes, table grid: >= 4.15 */

  /* Brand = TFD's interactive "accent" role */
  --abucear-brand:         var(--abucear-blue);  /* primary buttons, links, current nav, header band */
  --abucear-brand-hover:   #173D7B;              /* carried over from current style.css */
  --abucear-on-brand:      var(--abucear-white); /* text/icons on brand fills */
  --abucear-on-brand-secondary: var(--abucear-slate-mist);

  /* Accent = Dive Amber. Highlight, never interactive, never status. */
  --abucear-accent:        var(--abucear-amber);
  --abucear-on-accent:     var(--abucear-ink);   /* the ONLY text colour allowed on amber */

  /* Focus: 3px ring, 2px offset. Swap to amber on brand/dark fills. */
  --abucear-focus:         var(--abucear-blue);
  --abucear-focus-on-brand:var(--abucear-amber);
  --abucear-focus-width:   3px;
  --abucear-focus-offset:  2px;

  /* ---------- States ----------
     Operational meaning only: staffing gaps, open Pendientes, refresh
     failure, saved confirmations. Always a word (and ideally an icon)
     alongside the colour; never colour alone (brand book §8 Charts).
     The text colour doubles as the left border / icon colour. */
  --abucear-success:       #166534;  --abucear-success-bg: #F0FDF4;
  --abucear-warning:       #92400E;  --abucear-warning-bg: #FFFBEB;
  --abucear-danger:        #B91C1C;  --abucear-danger-bg:  #FEF2F2;
  --abucear-info:          var(--abucear-blue);
  --abucear-info-bg:       var(--abucear-shallow-sky);
  --abucear-on-danger:     var(--abucear-white); /* destructive button fill: 6.47 */

  /* ---------- TFD universal safety colours: NOT USED ----------
     --safety-orange / --safety-yellow / --safety-teal(-bright) /
     --depth-* encode dive-safety judgement (within / approaching / over a
     limit). This app records no certification, completion or safety
     verdict (apps/classes/AGENTS.md), so borrowing them would imply a
     judgement the app never makes. Do not alias them, and do not reuse
     DFUI statusSuccess/statusWarning for the same reason. If a future
     surface ever states a limit or exposure, that is dive-safety content:
     dive-science-advisor first, then a new token here.                 */

  /* ---------- Fonts ---------- */
  --abucear-font-heading:  "Montserrat", system-ui, -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --abucear-font-body:     "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --abucear-numeric:       tabular-nums;   /* font-variant-numeric for dates, times, counts */

  /* Type roles mapped onto the unchanged TFD scale.
     Brand book body is 16, so app body uses --fs-callout, not --fs-body.
     Headings: Montserrat 700 (large-title, title-1, title-2), 600 (title-3).
     Labels/buttons: Poppins 600. Smallest text: --fs-caption-1 (12);
     Poppins at 11 is too thin on phones, so --fs-caption-2 is unused.
     Uppercase only for short eyebrow labels (letter-spacing 0.08em);
     never headings, buttons or sentences (brand book §12 all-caps debt). */
  --abucear-text-body:     var(--fs-callout);      /* 16 */
  --abucear-text-small:    var(--fs-subheadline);  /* 15 help, meta */
  --abucear-text-label:    var(--fs-footnote);     /* 13 field labels, table headers */
  --abucear-text-eyebrow:  var(--fs-caption-1);    /* 12 */
  --abucear-line-body:     1.55;
  --abucear-line-heading:  1.2;

  /* Component mapping onto unchanged TFD radii/spacing */
  --abucear-radius-control:var(--radius-sm);   /* 6: inputs, buttons, chips */
  --abucear-radius-card:   var(--radius-md);   /* 12: cards, panels, framed course cards */
  --abucear-radius-sheet:  var(--radius-lg);   /* 16: dialogs, sign-in card */
  --abucear-control-h:     var(--touch-min);   /* 44 desktop */
  --abucear-control-h-touch: var(--touch-pref);/* 48 phones (<= 600px) */

  /* ==================================================================
     TFD shared scale — copied verbatim from tokens.css, DO NOT EDIT
     ================================================================== */
  --space-xxxs:  2px;
  --space-xxs:   4px;
  --space-xs:    8px;
  --space-sm:    12px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    32px;
  --space-xxl:   48px;
  --space-xxxl:  64px;
  --touch-min:   44px;
  --touch-pref:  48px;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  --fs-large-title: 32px;
  --fs-title-1:     28px;
  --fs-title-2:     22px;
  --fs-title-3:     20px;
  --fs-headline:    17px;
  --fs-body:        17px;
  --fs-callout:     16px;
  --fs-subheadline: 15px;
  --fs-footnote:    13px;
  --fs-caption-1:   12px;
  --fs-caption-2:   11px;
}

/* ========================================================================
   USAGE RULES (operations app vs marketing)

   Dive Amber
   - Marketing (brand book): CTAs, emphasis. Operations: at most ONE amber
     element per screen, and only as a highlight: the "Hoy" marker on the
     planner's upcoming list, or the active-nav underline on a blue band.
   - Staff primary actions are Abucear Blue, not amber. Amber buttons in a
     tool read as promotion and compete with real warnings.
   - Exception: the framed public intake/course-card CTA ("Inscríbete",
     "Ver fechas") MAY be amber with Ink text, because there it continues
     the abucear.mx convention the visitor just came from.
   - Amber never means warning or pending. Warning is #92400E + a word.
   - Never amber text or amber borders on light surfaces (1.67).
     Do:   <span class="hoy">Hoy</span> Ink on amber chip.
     Don't: amber "Pendiente" badge; amber link text on Ocean Mist.

   Logo
   - Staff workspace: blue (or ink) wordmark on the white header, height
     ~24px, clear space >= one letter-height on every side. Alternative if
     Oscar prefers a branded band: Abucear Blue header + white wordmark.
     Pick one; do not mix per page.
   - Diver lockup: sign-in page only, if anywhere; never in the workspace
     header (too small to stay legible, brand book §8).
   - Framed public pages: NO logo. The host page already carries the
     brand; a second logo inside the iframe is noise.
   - Never recolour the wordmark amber or place it inside a shape.

   Photography
   - Workspace: none. Staff want data; decoration costs phone screen and
     load time. Functional reference images (wetsuit sizing) are content,
     not brand photography; they need real alt text.
   - Framed course cards: only Abucear's own authorized photos, one
     subject, no copy over the subject, Spanish alt text. If abucear.mx
     already shows the course photo around the frame, the card goes
     text-only. Participant consent (brand book §11 item 5) applies.
   - Never stock, never neon-blue filters.

   Density and layout (TFD DiveShopOS-style patterns, Abucear colours)
   - Miriam's desktop planning views: tables for > 5 rows, not cards;
     Shallow Sky for selected/hover rows; blue for the current section.
   - Phones: single column, 48px controls, primary action full-width at
     the bottom of the form, no fixed-width buttons (Spanish runs ~20–30%
     longer than English).
   - Spacing: md (16) inside cards, lg (24) between cards, xl/xxl between
     sections. Cards: White on Ocean Mist, 1px --abucear-border, radius 12,
     no shadow (the site's look is flat).

   ======================================================================== */