.btn-outline {
    color: #0284c7;
    /* A borda e o ícone SVG herdam automaticamente a cor do texto */
    border: 2px solid currentColor;
    background-color: transparent;
    transition: color 0.2s ease;
}
 
.btn-outline:hover {
    color: #0369a1; /* Ao mudar a cor aqui, a borda também muda automaticamente! */
}
 
.btn-outline svg {
    fill: currentColor; /* O SVG fica sincronizado com a cor da tipografia */
}

/* 1. Hexadecimal Completo de 6 dígitos (#RRGGBB) */
.box-primaria {
    background-color: #0284c7;
}
 
/* 2. Hexadecimal Compacto de 3 dígitos (#RGB) */
/* Quando os pares se repetem (#ffffff vira #fff; #0099cc vira #09c) */
.box-branca {
    background-color: #fff;
}
 
/* 3. Hexadecimal com Canal Alfa de Transparência (#RRGGBBAA) */
/* Os últimos 2 dígitos representam o canal alfa de 00 (0%) a FF (100%) */
.box-com-transparencia {
    background-color: #0284c780; /* 80 em hex = 128 em decimal (~50% de opacidade) */
}

/* Sintaxe Clássica (Legada, mas suportada por compatibilidade) */
.card-antigo {
    background-color: rgba(2, 132, 199, 0.75);
}
 
/* Sintaxe Moderna do CSS4 (Mais limpa e recomendada) */
.card-moderno {
    background-color: rgb(2 132 199 / 75%); /* Espaços e barra com porcentagem! */
}

/* Criando uma família de tons no Design System alterando apenas o L (Lightness): */
:root {
    --brand-h: 200; /* Azul */
    --brand-s: 98%;
 
    --brand-light:   hsl(var(--brand-h) var(--brand-s) 90%); /* Azul bem clarinho */
    --brand-regular: hsl(var(--brand-h) var(--brand-s) 50%); /* Azul padrão */
    --brand-dark:    hsl(var(--brand-h) var(--brand-s) 20%); /* Azul marinho escuro */
}

/* Sintaxe OKLCH: Luminosidade (0 a 1), Croma (0 a 0.4), Matiz (0 a 360) */
.badge-moderna {
    background-color: oklch(0.65 0.22 142); /* Verde vibrante Display P3 */
}
 
/* Função color-mix(): Mistura duas cores nativamente no navegador sem pré-processador */
.banner-promo {
    /* Cria uma cor resultante de 80% do azul da marca com 20% de preto */
    background-color: color-mix(in srgb, #0284c7 80%, black);
}

<div class="pricing-card">
    <span class="pricing-badge">Plano Enterprise</span>
    <h3 class="pricing-title">R$ 189<span class="pricing-period">/mês</span></h3>
    <p class="pricing-desc">Acesso total à Web Academy com suporte dedicado e certificação.</p>
 
    <ul class="pricing-features">
        <li>
            <svg class="check-icon" viewBox="0 0 20 20">
                <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
            </svg>
            Mais de 150 ferramentas liberadas
        </li>
        <li>
            <svg class="check-icon" viewBox="0 0 20 20">
                <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
            </svg>
            Playground IDE sem limites de execução
        </li>
    </ul>
 
    <button class="btn-action">Assinar Agora</button>
</div>

/* ==========================================================================
   DESIGN TOKENS EM HSL COM CONTROLE ALFA
   ========================================================================== */
:root {
    /* Matiz e Saturação Mestres da Marca */
    --h-brand: 200;
    --s-brand: 98%;
 
    /* Tons Derivados */
    --color-surface:    hsl(222 47% 11%);       /* Fundo escuro #0f172a */
    --color-card-bg:    hsl(217 33% 17%);       /* Card #1e293b */
    --color-card-border:hsl(215 25% 27%);       /* Borda sutil */
    
    --color-primary:    hsl(var(--h-brand) var(--s-brand) 39%); /* Azul vivo */
    --color-primary-hover: hsl(var(--h-brand) var(--s-brand) 32%);
    --color-primary-soft: hsl(var(--h-brand) var(--s-brand) 39% / 15%); /* Fundo com 15% alfa */
 
    --color-text-main:  hsl(210 40% 98%);       /* Contraste 13:1 (AAA) */
    --color-text-muted: hsl(215 20% 65%);       /* Contraste 5.5:1 (AA) */
}
 
body {
    background-color: var(--color-surface);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1.5rem;
}
 
.pricing-card {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    border-radius: 12px;
    padding: 2.25rem;
    max-width: 380px;
    width: 100%;
    color: var(--color-text-main);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}
 
.pricing-badge {
    display: inline-block;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 1.25rem;
}
 
.pricing-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}
 
.pricing-period {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 400;
}
 
.pricing-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.75rem;
}
 
.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
}
 
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-main);
    margin-bottom: 0.85rem;
}
 
/* O ícone SVG herda o preenchimento via currentColor da cor primária */
.check-icon {
    width: 18px;
    height: 18px;
    color: #22c55e; /* Verde de sucesso */
    fill: currentColor;
    flex-shrink: 0;
}
 
.btn-action {
    width: 100%;
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
 
.btn-action:hover {
    background-color: var(--color-primary-hover);
}

/* Azul elétrico perfeito para botões de CTA */
.btn-moderno {
    background-color: oklch(0.6 0.22 250);
    color: white;
}
 
/* Tom de alerta com exatamente a mesma luminosidade perceptual (0.6) */
.btn-alerta {
    background-color: oklch(0.6 0.22 30);
    color: white;
}

/* Verde comum no espaço sRGB */
.card-padrao {
    border-color: rgb(0 255 0);
}
 
/* Verde ultrabrilhante que telas P3 conseguem emitir */
@supports (color: color(display-p3 0 1 0)) {
    .card-padrao {
        border-color: color(display-p3 0 1 0);
    }
}

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Laboratório de Modelos de Cor CSS</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #0f172a;
            color: #f8fafc;
            padding: 30px;
        }
 
        .container {
            max-width: 860px;
            margin: 0 auto;
        }
 
        .grid-modelos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 18px;
            margin-top: 24px;
        }
 
        .card-cor {
            border-radius: 12px;
            padding: 24px 18px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
 
        .card-cor strong {
            display: block;
            font-size: 16px;
            margin-bottom: 6px;
        }
 
        .card-cor code {
            font-size: 12px;
            background: rgba(0, 0, 0, 0.4);
            padding: 3px 6px;
            border-radius: 4px;
        }
 
        /* 1. Hexadecimal Tradicional */
        .box-hex {
            background-color: #0284c7;
            color: #ffffff;
        }
 
        /* 2. RGB Moderno (sem vírgulas) */
        .box-rgb {
            background-color: rgb(2 132 199);
            color: #ffffff;
        }
 
        /* 3. HSL com Transparência Alfa */
        .box-hsl {
            background-color: hsl(200 98% 39% / 85%);
            color: #ffffff;
        }
 
        /* 4. OKLCH Perceptual */
        .box-oklch {
            background-color: oklch(0.58 0.16 230);
            color: #ffffff;
        }
 
        .barra-gradiente {
            margin-top: 32px;
            height: 48px;
            border-radius: 8px;
            background: linear-gradient(to right in oklch, oklch(0.6 0.25 30), oklch(0.7 0.2 140), oklch(0.6 0.22 250));
        }
 
        .gradiente-legenda {
            font-size: 12px;
            color: #94a3b8;
            margin-top: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
 
    <div class="container">
        <h2 style="color: #38bdf8; margin: 0 0 10px;">O Mesmo Ponto de Azul em 4 Modelos Distintos</h2>
        <p style="color: #94a3b8;">Compare como a mesma tonalidade de azul é expressa em diferentes notações sintáticas:</p>
 
        <div class="grid-modelos">
            <div class="card-cor box-hex">
                <strong>Hexadecimal</strong>
                <code>#0284c7</code>
            </div>
 
            <div class="card-cor box-rgb">
                <strong>RGB Moderno</strong>
                <code>rgb(2 132 199)</code>
            </div>
 
            <div class="card-cor box-hsl">
                <strong>HSL com Alfa</strong>
                <code>hsl(200 98% 39% / 85%)</code>
            </div>
 
            <div class="card-cor box-oklch">
                <strong>OKLCH Perceptual</strong>
                <code>oklch(0.58 0.16 230)</code>
            </div>
        </div>
 
        <h3 style="color: #f1f5f9; margin-top: 36px;">Gradiente com Interpolação OKLCH (Sem "Banda Cinza")</h3>
        <div class="barra-gradiente"></div>
        <p class="gradiente-legenda">A interpolação <code>in oklch</code> impede que a transição entre cores opostas fique acinzentada e sem vida.</p>
    </div>
 
</body>
</html>