/* === CSS CUSTOM PROPERTIES FOR LAD === */
@import url('../../fonts.css');

:root {
    /* === EXISTING VARIABLES === */
    --charcoal: #2c3e50;
    --vermilion: #e74c3c;
    --antiflash-white: #ecf0f1;
    --celestial-blue: #3498db;
    --steel-blue: #2980b9;
    --fern-green: #4F7942;
    
    /* === EXISTING DICTIONARY VARIABLES === */
    --lemma-heading-color: var(--charcoal);
    --lemma-heading-size: 2.5rem;
    --lemma-heading-weight: 600;
    --lemma-heading-style: italic;
    
    --section-title-color: var(--charcoal);
    --section-title-size: 1.1rem;
    --section-title-weight: 600;
    
    --sense-number-color: var(--charcoal);
    --sense-number-size: 1rem;
    --sense-number-weight: bold;
    
    --definition-text-color: var(--charcoal);
    --definition-lang-color: var(--charcoal);
    --definition-lang-weight: bold;
    
    --citation-background: #f8f9fa;
    --citation-border-color: #dee2e6;
    --citation-padding: 10px;
    --citation-border-radius: 0px;
    
    --quote-text-color: var(--fern-green);
    --translation-color: var(--charcoal);
    
    --usage-label-color: var(--charcoal);
    --usage-label-weight: bold;
    --usage-value-color: #6c757d;
    
    --note-text-color: #6c757d;
    --note-size: 0.9em;
    
    --grammar-type-color: var(--charcoal);
    --grammar-type-weight: bold;
    --grammar-value-color: var(--charcoal);
    --grammar-value-style: italic;
    
    --tooltip-background: rgba(44, 62, 80, 0.9);
    --tooltip-text-color: white;
    --tooltip-border-radius: 4px;

    /* CAD-specific tooltip colors (gray tones) */
    --cad-tooltip-background: rgba(73, 80, 87, 0.95); /* Medium gray */
    --cad-tooltip-text-color: #f8f9fa; /* Light gray/white */
    --cad-tooltip-border: 1px solid rgba(108, 117, 125, 0.3); /* Subtle gray border */

    --section-spacing: 1.5rem;
    --sense-spacing: 20px;
    --citation-spacing: 15px;
    --sub-entry-spacing: 15px;
    
    --section-divider-height: 1px;
    --section-divider-color: #ccc;
    --section-divider-margin: 15px;
    
    --entry-container-padding: 20px 0;
    --entry-container-margin: 20px;
    --entry-border-radius: 0px;
    --card-shadow: none;
    
    /* 'Noto Sans' first so every reader sees the same page: it is shipped as a webfont
       (resources/fonts/NotoSans-*-latin{,-ext}.woff), so Windows, macOS, Linux and Android
       all render from the same file instead of Segoe UI / SF Pro / Roboto. It also fixes a
       long-standing size mismatch - measured 2026-09-16, Segoe UI has an x-height of 0.500em
       against Noto Sans's 0.547em, so LAD at 16px rendered visibly smaller than the CAD and
       AHw columns beside it at 18px (x-height 8.0px vs 8.2px, cap 11px vs 12px). In Noto Sans
       the same 16px lands on x=9 cap=12, matching both. Do NOT 'simplify' the size to 18px to
       match them; that would overshoot. The rest of the stack is the old one, for the case
       where the webfont fails to load. */
    --base-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* Deliberately its own token even though it currently holds the same stack as
       --ahw-font-family: CAD is expected to get a dedicated face again, and collapsing
       the two would make that a search-and-replace instead of a one-line change.
       Moved off Source Serif 4 on 2026-09-16 - it is the only serif considered that
       cannot set a line of CAD unaided: it lacks the half-brackets U+2E22/2E23 (~4600
       uses in the corpus) and the rare t-with-macron-below. Noto Serif carries the whole
       Assyriological repertoire AND is the only complete serif with a weight axis, which
       is what lets CAD sit at 350 while AHw sits at 300 in the same face. */
    --cad-font-family: 'Noto Serif', 'Charis SIL', 'Times New Roman', serif;
    --ahw-font-family: 'Noto Serif', 'Charis SIL', 'Times New Roman', serif;
    --lad-font-editor: 'Noto Serif', 'Charis SIL', 'Times New Roman', serif;
    --base-line-height: 1.6;
    /* 18px, matching .cad-entry and .ahw-entry, so the three dictionary columns read as
       equals. Measured 2026-09-16 at 18px Noto Sans: x-height 9.84px, cap 12.94px against
       the serifs' 8.16 / 12.09 - LAD sits slightly above them, which is intended, it is the
       primary entry and they are reference columns. A sans and a serif cannot match on both
       x-height and cap-height at once; caps are the closer match here. */
    --base-font-size: 18px;

    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    
    --italic-font-style: italic;
    --normal-font-style: normal;
    
    --akkadian-font-style: italic;
    --sumerian-letter-spacing: 1px;
    /* An EXPLICIT length, not `super`. A child cannot be un-raised with
       `vertical-align: baseline` - that aligns it to its PARENT's baseline, which is
       already raised, so an editorial bracket inside a determinative stayed up with the
       sign (measured in a browser 2026-09-10: identical bottom edge, 17px vs 17px).
       Only an equal and opposite offset brings it down, and that needs a known number.
       0.53em reproduces `super` to within 0.03px at 16px/serif, so nothing moved. */
    --determinative-vertical-align: 0.53em;
    --determinative-font-size: 75%;
    /* Reciprocal of --determinative-font-size, for children that must return to the
       surrounding text size (editorial brackets inside a determinative). Keep the two
       in sync: undo == 100% / size. */
    --determinative-font-size-undo: 133.333%;
    /* Cancels the raise above for such a child. The child's font-size is back to 100% of
       the surrounding text while the parent's em is 75% of it, so the offset has to be
       expressed in the CHILD's em: -(0.53 * 0.75) = -0.3975. Recompute if either of the
       two values above changes. */
    --determinative-bracket-align: -0.3975em;
    /* Simulated small capitals: uppercase the text and scale it down, because
       `font-variant-caps` cannot render small-cap forms for the Assyriological
       characters - see page/dictionary/linguistic.css for the measurements. Both
       values are load-bearing together; a logogram sets BOTH, never one alone.
       0.75 reproduces Segoe UI's own small-cap height (52/70 = 0.743, measured at
       100px), so every letter that already worked is unchanged on screen. */
    --logogram-transform: uppercase;
    --small-caps-scale: 0.75em;
    /* Scaled capitals come out lighter than the text around them - a real small cap is
       drawn with heavier strokes, and scaling cannot add ink. This puts it back.
       -webkit-text-stroke rather than font-weight on purpose: font-weight depends on
       which weights the reader's font actually has (Segoe UI jumps straight to Semibold
       at 500, macOS SF has a true Medium, static Charis SIL has nothing between Regular
       and Bold), which is the same font-dependence this whole rule exists to avoid.
       A stroke is the same on every font. Despite the prefix it works in Chrome, Edge,
       Safari and Firefox. Nested determinatives reset it - they are not small capitals. */
    --small-caps-stroke: 0.25px;
    --latin-italic: italic;
    
    --link-color: var(--celestial-blue);
    --link-hover-color: var(--steel-blue);
    --link-transition: color 0.2s;
    
    --container-max-width: 1200px;
    --header-height: 56px;
    --admin-panel-width: 400px;

    /* Temporal Period Colors - Distributed across spectrum for maximum distinction */
    --period-ps: #0077b6;           /* Presargonic - deep blue */
    --period-ebla: #e71d36;         /* Ebla - vivid red */
    --period-oakk: #52b788;         /* Old Akkadian - vibrant green */
    --period-uriii: #ff8500;        /* Ur III - vivid orange */
    --period-ob: #8338ec;           /* Old Babylonian - bright purple */
    --period-oa: #fca311;           /* Old Assyrian - vivid yellow */
    --period-mb: #00b4d8;           /* Middle Babylonian - bright cyan */
    --period-ma: #c1121f;           /* Middle Assyrian - deep crimson */
    --period-sb: #2a9d8f;           /* Standard Babylonian - teal */
    --period-nb: #f4442e;           /* Neo Babylonian - bright red-orange */
    --period-na: #2d6a4f;           /* Neo Assyrian - forest green */
    --period-lb: #ff6b35;           /* Late Babylonian - bright coral */
    --period-uncertain: #6c757d;    /* Uncertain periods - gray */
    --period-onwards: #495057;      /* "Onwards" periods - dark gray */
    --period-default: #6c757d;      /* Default/unknown period */
    
    /* === NEW: LAYOUT CONTROL VARIABLES === */
    
    /* Citation Layout Controls */
    --citation-layout: vertical; /* vertical | horizontal | compact */
    --citation-display: block;
    --citation-flex-direction: column;
    --citation-gap: 8px;
    --citation-align-items: stretch;
    
    /* Citation Element Widths (for horizontal layout) */
    --quote-width: auto;
    --translation-width: auto;
    --reference-width: auto;
    
    /* Sense Layout Controls */
    --sense-layout: stacked; /* stacked | grid | inline */
    --sense-display: block;
    --sense-grid-columns: 1;
    --sense-flex-wrap: nowrap;
    
    /* Grammar Layout Controls */
    --grammar-layout: list; /* list | tags | grid | compact */
    --grammar-display: flex;
    --grammar-flex-direction: column;
    --grammar-flex-wrap: nowrap;
    --grammar-gap: 10px;
    
    /* Definition Layout Controls */
    --definition-layout: vertical; /* vertical | horizontal */
    --definition-display: block;
    --definition-flex-direction: column;
    --definition-gap: 8px;
    
    /* Layout Density */
    --layout-density: normal; /* compact | normal | spacious */
    --density-multiplier: 1;
    
    /* Element Visibility */
    --show-references: block;
    --show-translations: block;
    --show-notes: block;
    --show-usage: block;
}