/*
=========================================================
TYPODULO
=========================================================

Fichier :
theme.css

Rôle :
Centraliser l'identité visuelle du projet.

Contient :
- variables CSS globales
- palette de couleurs
- dimensions réutilisables
- typographie
- ombres
- rayons de bordure

Remarque :
Toute valeur visuelle réutilisée plusieurs fois
doit être déclarée ici sous forme de variable.

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

:root {
    --font-ui: "Recursive", sans-serif;
    --bg: #eeebe6;
    --panel-bg: #f7f4ee;
    --paper: #fffef9;
    --border: #d7d1c7;
    --shadow:
        0 8px 20px rgba(0,0,0,.08);
    --radius: 12px;
    --sidebar-width: 320px;
}
/* =========================================================
TYPOGRAPHY GUIDES
========================================================= */
.typography-guide {
    stroke: #457b9d;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.guide-baseline {
    stroke: #457b9d;
    stroke-width: 2;
}
.guide-cap {
    stroke: #457b9d;
}
.guide-ascender,
.guide-descender {
    stroke: #457b9d;
}
/* =========================================================
GLYPH FRAME
========================================================= */
.glyph-bearing{
    stroke: #457b9d;
    stroke-width:1;
    stroke-dasharray:10 10;
    vector-effect:non-scaling-stroke;
}
/* =========================================================
TYPOGRAPHY LABELS
========================================================= */
.typography-label{
    color: #457b9d;
    font-size:11px;
    font-weight:600;
    text-anchor:end;
    dominant-baseline:middle;
    pointer-events:none;      
    letter-spacing:.08em;
    stroke:none;
    user-select:none;
}
.guide-baseline.typography-label{
    color: #457b9d;
}
/* =========================================================
DRAWING AREA
========================================================= */
.glyph-drawing-area{
    fill: none;
    stroke: none; 
    pointer-events:none;
}